/*----------------------------------------------------------------------------
 ONLYPATHS 0.1 
 from
 RICHDRAW 1.0
 Vector Graphics Drawing Script
 -----------------------------------------------------------------------------
 Created by Mark Finkle (mark.finkle@gmail.com)
 Implementation of simple vector graphic drawing control using SVG or VML.
 -----------------------------------------------------------------------------
 Copyright (c) 2006 Mark Finkle  
               2008 Antimatter15  
               2008 Josep_ssv

 This program is  free software;  you can redistribute  it and/or  modify it
 under the terms of the MIT License.

 Permission  is hereby granted,  free of charge, to  any person  obtaining a
 copy of this software and associated documentation files (the "Software"),
 to deal in the  Software without restriction,  including without limitation
 the  rights to use, copy, modify,  merge, publish, distribute,  sublicense,
 and/or  sell copies  of the  Software, and to  permit persons to  whom  the
 Software is  furnished  to do  so, subject  to  the  following  conditions:
 The above copyright notice and this  permission notice shall be included in
 all copies or substantial portions of the Software.

 THE SOFTWARE IS PROVIDED "AS IS",  WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED,  INCLUDING BUT NOT LIMITED TO  THE WARRANTIES  OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR  COPYRIGHT  HOLDERS BE  LIABLE FOR  ANY CLAIM,  DAMAGES OR OTHER
 LIABILITY, WHETHER  IN AN  ACTION OF CONTRACT, TORT OR  OTHERWISE,  ARISING
 FROM,  OUT OF OR  IN  CONNECTION  WITH  THE  SOFTWARE OR THE  USE OR  OTHER
 DEALINGS IN THE SOFTWARE.
 -----------------------------------------------------------------------------
 Dependencies: (SVG or VML rendering implementations)
 History:
 2006-04-05 | Created richdraw.js  
 2008       | Update content and added framework ExtJS    
 2008-06-08 | Rename onlypaths.js  
 2008-06-20 | Adapte to viewer, rename op_viewer.js inlude svg and vmlrenderer.js
 --------------------------------------------------------------------------*/  
  var viewMode='preview';//'canvas' or 'preview'
  //var c, myOPF, myOPF1;
  
  var instanceNumber = [] ; 
  var OPF = [] ;  
  var OPFnumber = 0 ;
  var OPFstr= [] ;  
  var fileCharged=[];
  var chargeInterval=[];	
  var instance = [] ; 
  var canvasLeft = 0;
  var canvasTop = 0; 
  var canvasWidth = 480;
  var canvasHeight = 280; 
   //***bad repeat
  var canvasX=0; 
  var canvasY=0;
  var canvasW=canvasWidth;  
  var canvasH=canvasHeight; 
  
  var noattachlistener=true;
  
  var screenW=canvasWidth;
  var screenH=canvasWidth;
  var zoominit = canvasLeft+' '+canvasTop+' '+canvasWidth+' '+canvasWidth; 
  var zoominit1 =zoominit;  
  var zoominit2 =zoominit;
  var drawSpace;
/*  var fileNum=0;
  var framesNum=0;
  var frames= [];
*/  
  var mode='canvas';//'canvas' or 'preview'
  //var initialFile='onlypaths_images.txt';
 //var initialFile='solids.txt';  
 //var initialFile='bambi_fashion.txt';
  //var initialFile='shapes.txt'; 
  var initialFile='new.txt'; 
  //var initialFile='biglong.txt'; 
  var fullscreen = false;  
  var proporCanvas=1;    
  var proporImage=1;
  var vertexFRONT={};
  var FRONTsize=[]; 
  


  ie = navigator.appVersion.match(/MSIE (\d\.\d)/);
  opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
  
var xpArray=new Array();
var ypArray=new Array(); 
var setPoints=new Array(); 

var inout='';//true;
var typeTransform='';

var contmove=0;  
var zoomx=0;
var zoomy=0;
var zoomscale=1;
var zoommode='frame'; //more minus frame

//
 
var data_path_close=true;
var data_text_family='Arial';
var data_text_size=19;
var data_text_messaje='My text';
var data_image_href='';   
 
var numClics=0;   
 //var zoominit=0+' '+0+' '+600+' '+400; 

////////////



/////////////////////////////



function createUUID()
{
  return [4, 2, 2, 2, 6].map(function(length) {
    var uuidpart = "";
    for (var i=0; i<length; i++) {
      var uuidchar = parseInt((Math.random() * 256)).toString(16);
      if (uuidchar.length == 1)
        uuidchar = "0" + uuidchar;
      uuidpart += uuidchar;
    }
    return uuidpart;
  }).join('-');
}

//==========================================================
//==========================================================
// format.js
//==========================================================
//==========================================================



function load(code,draw)
{
 var renderdoc=false;  
 var renderinfo=false
 for(var i = 0; i < code.length; i++)
  {
   var rendering=true;  

   if(code[i].type == "info")
    {
     rendering=false; 
     renderinfo=true;
     if(code[i].loop!=null)
      {
       timerNext=code[i].loop;
      }else{
       timerNext=0;
      }            
    } 
    
   if(code[i].type == "doc")
    { 
     rendering=false; 
     renderdoc=true;
     if(fullscreen==false)
      {
       draw.renderer.view(
       code[i].left,
       code[i].top,
       code[i].width,
       code[i].height,
       code[i].viewBox
       //(code[i].bgcolor!=null)?code[i].bgcolor:"" 
       ); 
      }
       else
      {
       draw.renderer.view(
        0,
        0,
        screenW,
        screenH,
        code[i].viewBox,
        ''
        ); 
      }  
    }
   
   if( rendering==true)
    {
     var co  = draw.renderer.create(code[i].type, 
     (code[i].fillColor!=null)?code[i].fillColor:"", 
     (code[i].lineColor)?code[i].lineColor:"", 
     (code[i].fillOpac)?code[i].fillOpac:"", 
     (code[i].lineOpac)?code[i].lineOpac:"", 
     (code[i].lineWidth)?code[i].lineWidth:"", 
     (code[i].left)?code[i].left:"", 
     (code[i].top)?code[i].top:"", 
     (code[i].width)?code[i].width:"", 
     (code[i].height)?code[i].height:"",  
     (code[i].text)?code[i].text:'', 
     (code[i].textSize)?code[i].textSize:"",    
     (code[i].textFamily)?code[i].textFamily:'Arial', 
     (code[i].href)?code[i].href:'', 
     (code[i].points)?code[i].points:'', 
     (code[i].transform)?code[i].transform:'',
     (code[i].parent)?code[i].parent:''); 
    
     if(co){
      co.id = ""+code[i].id;  
      if (!noattachlistener) 
       { 
        co.addEventListener("click", function(event) { myfunction(this.id,draw,event); }, false);
        co.addEventListener("mouseover", function(event) {myOverFunction(this.id,draw,event); }, false);
        co.addEventListener("mouseout", function(event) {myOutFunction(this.id,draw,event); }, false);
        co.addEventListener("mouseup", function(event) {myUpFunction(this.id,draw,event); }, false);
        co.addEventListener("mousedown", function(event) {myDownFunction(this.id,draw,event); }, false);
        co.addEventListener("mousemove", function(event) {myMoveFunction(this.id,draw,event); }, false);
        co.addEventListener("dblclick", function(event) {myDblclickFunction(this.id,draw,event); }, false);

       }
      } 
    }
  }
 if(renderdoc == false)
  { 
   if(fullscreen==false)
    {
     draw.renderer.view(0,0,canvasWidth,canvasHeight,'0 0 700 400'),'';   
    }
     else
    {
     draw.renderer.view(0,0,screenW,screenH,'0 0 700 400','');
    }
  }  
 if(renderinfo == false)
  { 
  } 
  fileCharged[OPFnumber]==true  
}

//==========================================================
//==========================================================
// svgrenderer.js
//==========================================================
//==========================================================
//----------------------------------------------------------------------------
// AbstractRenderer
//
// Abstract base class defining the drawing API. Can not be used directly.
//----------------------------------------------------------------------------

function AbstractRenderer() {

};

AbstractRenderer.prototype.init = function(elem) {};
AbstractRenderer.prototype.bounds = function(shape) { return { x:0, y:0, width:0, height: 0 }; };

function SVGRenderer() {
	this.base = AbstractRenderer;
	this.svgRoot = null;
}


SVGRenderer.prototype = new AbstractRenderer;




SVGRenderer.prototype.init = function(elem) {
  this.container = elem;

  this.container.style.MozUserSelect = 'none';
    
  var svgNamespace = 'http://www.w3.org/2000/svg'; 
  
  this.svgRoot = this.container.ownerDocument.createElementNS(svgNamespace, "svg");
  
  //this.svgRoot.setAttributeNS(null,'xmlns:link','http://www.w3.org/1999/xlink');
  this.svgRoot.setAttributeNS(null,'preserveAspectRatio','none');
  //this.svgRoot.setAttributeNS(null,'space','preserve');
  this.container.appendChild(this.svgRoot);
}

SVGRenderer.prototype.view = function(left,top,width,height,viewBox,bgcolor) {
  var svgNamespace = 'http://www.w3.org/2000/svg'; 
  var tokens = viewBox.split(' ');       
  var margin=100; 
  var wFront=parseInt(this.container.style.width)
  var hFront=parseInt(this.container.style.height)
  var tC=0 + ' ' + 0 + ' ' + wFront + ' ' + hFront;
  tokensCanvas= tC.split(' '); 
  var w=parseFloat(tokens[2]);
  var h=parseFloat(tokens[3]); 
  var wImage = w - parseFloat(tokens[0]);  
  var hImage = h - parseFloat(tokens[1]);
  var wCanvas = wFront;
  var hCanvas = hFront;
  proporImage = hImage / wImage; 
  proporCanvas = hCanvas / wCanvas; 
  if(isNaN(left)){left=0;}
  if(isNaN(top)){top=0;}
  //this.container.title= initialFile +'     '+wImage+' x '+hImage;


  if(bgcolor != '')
   {
    this.container.style.backgroundColor=bgcolor;
   } else{
    this.container.style.backgroundColor="#ffffff";
   }
if(viewMode=='preview')
 {
  if(proporCanvas==proporImage)
   {
      this.container.style.width =wFront+'px';
      this.container.style.height =hFront+'px';
      this.container.style.left ='0px' 
      this.container.style.top ='0px' 

   }
  if(proporCanvas<proporImage)
   {    
      var proportion= wFront/hFront;  
      //var image_proportion= width/height;
      var image_proportion= w/h;
      var W=hFront*image_proportion; 
      var leftover=(wFront-W)/2;
      
      this.container.style.width =W+'px';
      this.container.style.height =hFront+'px';
      this.container.style.left =leftover+'px' 
      this.container.style.top ='0px' 
      //alert('Horizontal '+wFront+','+hFront+' '+image_proportion+' '+W+' '+leftover+' ____'+ this.container.style.width)
 
    } 
  if(proporCanvas>proporImage)
   {    
      var proportion= hFront/wFront;  
      //var image_proportion= width/height;
      var image_proportion= h/w;
      var H=wFront*image_proportion; 
      var leftover=(hFront-H)/2;
      
      this.container.style.width =wFront+'px';
      this.container.style.height =H+'px';
      this.container.style.left ='0px' 
      this.container.style.top =leftover+'px' 
    }   
 
    this.svgRoot.setAttributeNS(null,'x', left+'px');
    this.svgRoot.setAttributeNS(null,'y', top+'px'); 
    this.svgRoot.setAttributeNS(null,'width', parseInt(this.container.style.width)+'px');
    this.svgRoot.setAttributeNS(null,'height', parseInt(this.container.style.height)+'px'); 
 
    this.svgRoot.setAttributeNS(null,'viewBox', viewBox);
   
  } 
if(viewMode=='canvas')
 {
   this.container.style.left =  '0px';   
   this.container.style.top = '0px';                                 
   this.container.style.width = wFront + 'px';
   this.container.style.height = hFront + 'px';
   
   //  margins 10%    
   var percent=10;
   var percentX = wImage / percent; 
   var percentY = hImage / percent; 
   var cornerNEx = parseFloat(tokens[0])-percentX; 
   var cornerNEy = parseFloat(tokens[1])-percentY;
   var percentRectW=wImage + percentX*2;
   var percentRectH=hImage + percentY*2; 
 
   //document.title= initialFile +'     '+wImage+' x '+hImage;
   // ajust proporImage to proporCanvas
  if(proporCanvas==proporImage)
   {  
      cornerNEx = parseFloat(tokens[0])-percentX
      cornerNEy = parseFloat(tokens[1])-percentY  
      var wi=percentRectW;
      var he=percentRectH;//hImage+percentY+addHimage; 
      zoominit=viewBox;
      zoominit1 = cornerNEx+' '+cornerNEy+' '+wi+' '+he;
      tokensZoom=zoominit1.split(' ');  
   }

  if(proporCanvas<proporImage)
   {    
        
        // add to hImage
        var newWimage = percentRectW * ((wCanvas * percentRectH) / (hCanvas * percentRectW))  ;//newRectH *
        var diffImages=newWimage-w;
        cornerNEx = parseFloat(tokens[0]) - (diffImages / 2);
        var wi=newWimage;
        var he=percentRectH;//hImage+percentY+addHimage; 
        zoominit=viewBox;
        zoominit1 = cornerNEx+' '+cornerNEy+' '+wi+' '+he;
        tokensZoom=zoominit1.split(' '); 
         //alert(newRectW+' '+newRectH+' // '+newHimage+' // '+zoominit1+' // '+hCanvas * newRectW +' '+ wCanvas * newRectH)
        //alert(addHimage+' // '+zoominit1)                   
        //160 160 700 300
    }
  if(proporCanvas>proporImage)
   {    
        // add to hImage
        var newHimage = percentRectH * ((hCanvas * percentRectW) / (wCanvas * percentRectH))  ;//newRectH *
        var diffImages=newHimage-h;
        cornerNEy = parseFloat(tokens[1]) - (diffImages / 2);
        var wi=percentRectW;
        var he=newHimage;//hImage+percentY+addHimage; 
        zoominit=viewBox;
        zoominit1 = cornerNEx+' '+cornerNEy+' '+wi+' '+he;
        tokensZoom=zoominit1.split(' '); 
   } 
 /* this.svgRoot.setAttributeNS(null,'x', cornerNEx);
  this.svgRoot.setAttributeNS(null,'y', cornerNEy); 
  this.svgRoot.setAttributeNS(null,'width', wi);   
  this.svgRoot.setAttributeNS(null,'height',he); 
 */
  this.svgRoot.setAttributeNS(null,'x', '0px');
  this.svgRoot.setAttributeNS(null,'y', '0px'); 
  this.svgRoot.setAttributeNS(null,'width', wFront+'px');   
  this.svgRoot.setAttributeNS(null,'height',hFront+'px'); 
  this.svgRoot.setAttributeNS(null,'viewBox', zoominit1);  
  

  }
}

SVGRenderer.prototype.zoomFrame = function(zoom){
   this.svgRoot.setAttributeNS(null,'viewBox', zoom);
}

SVGRenderer.prototype.rectDoc = function(viewBox) {
  var svgNamespace = 'http://www.w3.org/2000/svg'; 
        var tokens = viewBox.split(' ');   
  var shape = document.getElementById('rectDoc');
  if (shape) {
    this.remove(shape);
  } 
  var rect=this.container.ownerDocument.createElementNS(svgNamespace, 'rect');
  rect.setAttributeNS(null, 'id', 'rectDoc');
  rect.setAttributeNS(null, 'x', tokens[0] + 'px');
  rect.setAttributeNS(null, 'y', tokens[1] + 'px');
  rect.setAttributeNS(null, 'width', tokens[2]+ 'px');
  rect.setAttributeNS(null, 'height', tokens[3] + 'px');  
  rect.setAttributeNS(null, 'fill', 'none');
  rect.setAttributeNS(null, 'stroke', '#000000');
  rect.setAttributeNS(null, 'stroke-width', 1+'px');
 // this.svgRoot.appendChild(rect)  
  this.svgRoot.insertBefore( rect, this.svgRoot.firstChild );
}  
 
SVGRenderer.prototype.rectCanvas = function(docx,docy,docw,doch,viewBox) {   
 var svgNamespace = 'http://www.w3.org/2000/svg'; 
    var tokens = zoominit1.split(' ');    
  var shape = document.getElementById('rectCanvas');
  if (shape) {
    this.remove(shape);
  }     
  var rect=this.container.ownerDocument.createElementNS(svgNamespace, 'rect');
  rect.setAttributeNS(null, 'id', 'rectBackground');
  rect.setAttributeNS(null, 'x', tokens[0] + 'px');
  rect.setAttributeNS(null, 'y', tokens[1] + 'px');
  rect.setAttributeNS(null, 'width', tokens[2] + 'px');
  rect.setAttributeNS(null, 'height', tokens[3] + 'px');  
  rect.setAttributeNS(null, 'fill', '#666666');
  rect.setAttributeNS(null, 'stroke', 'none');
  //this.svgRoot.appendChild(rect)     
   this.svgRoot.insertBefore( rect, this.svgRoot.firstChild );

  //this.index('rectBackground',0);
  
 /*  var shape = document.getElementById('rectOverCanvas');
  if (shape) {
    this.remove(shape);
  } 
  var rect=this.container.ownerDocument.createElementNS(svgNamespace, 'rect');
  rect.setAttributeNS(null, 'id', 'rectOverCanvas');
  rect.setAttributeNS(null, 'x', docx + 'px');
  rect.setAttributeNS(null, 'y', docy + 'px');
  rect.setAttributeNS(null, 'width', docw + 'px');
  rect.setAttributeNS(null, 'height', doch + 'px');  
  rect.setAttributeNS(null, 'fill', 'none');
  rect.setAttributeNS(null, 'stroke', '#000000');
  rect.setAttributeNS(null, 'stroke-width', 1+'px');
 // this.svgRoot.appendChild(rect)  
  this.svgRoot.insertBefore( rect, this.svgRoot.lastChild );
  */
}

SVGRenderer.prototype.removeAll = function() 
{  
 while( this.svgRoot.hasChildNodes () )
 {
   this.svgRoot.removeChild( this.svgRoot.firstChild );
 }
}

SVGRenderer.prototype.create = function(shape, fillColor, lineColor, fillOpac, lineOpac, lineWidth, left, top, width, height, textMessaje, textSize, textFamily, imageHref, points, transform, parent, viewBox) {
  var svgNamespace = 'http://www.w3.org/2000/svg'; 
  var xlinkNS="http://www.w3.org/1999/xlink"; 
 
  var svg;  
  
  if (shape == 'rect') {
    svg = this.container.ownerDocument.createElementNS(svgNamespace, 'rect');
    svg.setAttributeNS(null, 'x', left + 'px');
    svg.setAttributeNS(null, 'y', top + 'px');
    svg.setAttributeNS(null, 'width', width + 'px');
    svg.setAttributeNS(null, 'height', height + 'px');  
    svg.setAttributeNS(null, 'rx', 0+'px');
    svg.setAttributeNS(null, 'ry', 0+'px');

    //svg.setAttributeNS(null,'transform', "translate(0,0)");
    //svg.setAttributeNS(null,'transform', "translate('+left+','+top+')");   
    svg.style.position = 'absolute';
  }
  else if (shape == 'ellipse' || shape == 'circle') {
    
    svg = this.container.ownerDocument.createElementNS(svgNamespace, 'ellipse');
    svg.setAttributeNS(null, 'cx', (left + width / 2) + 'px');
    svg.setAttributeNS(null, 'cy', (top + height / 2) + 'px');
    if(shape == 'circle'){
     svg.setAttributeNS(null, 'rx', (width / 2) + 'px');
     svg.setAttributeNS(null, 'ry', (width / 2) + 'px');   
    }else{
     svg.setAttributeNS(null, 'rx', (width / 2) + 'px');
     svg.setAttributeNS(null, 'ry', (height / 2) + 'px');   
    
    }
   //svg.setAttributeNS(null,'transform', "translate('+left+','+top+')");  
    svg.style.position = 'absolute';
  }
  else if (shape == 'roundrect') {
    svg = this.container.ownerDocument.createElementNS(svgNamespace, 'rect');
    svg.setAttributeNS(null, 'x', left + 'px');
    svg.setAttributeNS(null, 'y', top + 'px');  
    if(textSize!=0 || textSize!=''){ var rounded=textSize; }else{var rounded=18;}
    svg.setAttributeNS(null, 'rx', rounded+'px');
    svg.setAttributeNS(null, 'ry', rounded+'px');
    svg.setAttributeNS(null, 'width', width + 'px');
    svg.setAttributeNS(null, 'height', height + 'px');   
   //svg.setAttributeNS(null,'transform', "translate('+left+','+top+')");  
    svg.style.position = 'absolute';
  }
  else if (shape == 'line') {
    svg = this.container.ownerDocument.createElementNS(svgNamespace, 'line');
    svg.setAttributeNS(null, 'x1', left + 'px');
    svg.setAttributeNS(null, 'y1', top + 'px');
    svg.setAttributeNS(null, 'x2', left + width + 'px');
    svg.setAttributeNS(null, 'y2', top + height + 'px');  
    //svg.setAttributeNS(null,'transform', "translate('+left+','+top+')");  
    svg.style.position = 'absolute';
  } 
  else if (shape == 'polyline' || shape == 'polygon') {
    var xcenterpoly=xpArray;
    var ycenterpoly=ypArray;
    var thispath=''+xpArray[1]+','+ypArray[1];
    svg = this.container.ownerDocument.createElementNS(svgNamespace, shape);  
    svg.setAttributeNS(null, 'points', points);
    svg.style.position = 'absolute';
  }
  else if (shape == 'path')
    {
    var k = (Math.sqrt(2)-1)*4/3;
    var circle="M 0,1 L 0.552,1 1,0.552  1,0  1,-0.552  0.552,-1 0,-1 -0.552,-1 -1,-0.552 -1,0  -1,0.552  -0.552,1  0,1z"  // 4th
    svg = this.container.ownerDocument.createElementNS(svgNamespace, 'path');   
    //svg.setAttributeNS(null, 'd', 'M '+thispath+' C'+thispath);
    svg.setAttributeNS(null, 'd', points);  	
    //svg.setAttributeNS(null,'transform', "translate(-80,-80)"); 
    svg.style.position = 'absolute';  
    } 
     else if (shape == 'controlpath')
    {
    var point='M '+left+','+top+' L '+(left+1)+','+(top+1)+'z'  // 4th
    svg = this.container.ownerDocument.createElementNS(svgNamespace, 'path');   
    //svg.setAttributeNS(null, 'd', 'M '+thispath+' C'+thispath);
    svg.setAttributeNS(null, 'd', point);  	
    svg.setAttributeNS(null,'transform', "translate(0,0)"); 
    svg.style.position = 'absolute';  
    } 
  else if (shape == 'text') 
   {
    var data = this.container.ownerDocument.createTextNode(textMessaje);
    svg = this.container.ownerDocument.createElementNS(svgNamespace, 'text');
    svg.setAttributeNS(null, 'x', parseFloat(left) + 'px');
    svg.setAttributeNS(null, 'y', parseFloat(top) + 'px');
    svg.setAttributeNS(null, 'font-family', textFamily );
    svg.setAttributeNS(null, 'font-size', parseFloat(textSize)); 
    svg.style.position = 'absolute';  
    svg.appendChild(data);   
   } 
    else if (shape == 'clipPath') 
   {
    svg = this.container.ownerDocument.createElementNS(svgNamespace, 'clipPath');
   }    
    else if (shape == 'filter') 
   {
    svg = this.container.ownerDocument.createElementNS(svgNamespace, 'filter');
   }  
    else if (shape == 'feGaussianBlur') 
   {
    svg = this.container.ownerDocument.createElementNS(svgNamespace, 'filter');
    svg.setAttributeNS(null, 'in','SourceGraphic');
    svg.setAttributeNS(null, 'stdDeviation',parseFloat(left));
   }  
    else if (shape == 'linearGradient') 
   {
    svg = this.container.ownerDocument.createElementNS(svgNamespace, 'linearGradient');
    svg.setAttributeNS(null, 'x1', left);
    svg.setAttributeNS(null, 'y1', top);
    svg.setAttributeNS(null, 'x2', width); 
    svg.setAttributeNS(null, 'y2', height);  
    svg.setAttributeNS(null, 'gradientUnits',textMessaje);//"userSpaceOnUse" 
    svg.setAttributeNS(xlinkNS,'href', imageHref);
  
 }  
 else if (shape == 'radialGradient') {
    svg = this.container.ownerDocument.createElementNS(svgNamespace, 'radialGradient');
    svg.setAttributeNS(null, 'gradientUnits',textMessaje);//"userSpaceOnUse" 
    svg.setAttributeNS(null, 'cx', left);
    svg.setAttributeNS(null, 'cy', top );
    svg.setAttributeNS(null, 'fx', width);
    svg.setAttributeNS(null, 'fy', height);  
    svg.setAttributeNS(null, 'r', lineWidth);     
    svg.setAttributeNS(xlinkNS,'href', imageHref);
 }   
 else if (shape == 'stop') {
    svg = this.container.ownerDocument.createElementNS(svgNamespace, 'stop');
    svg.setAttributeNS(null, 'stop-color', fillColor);
    svg.setAttributeNS(null, 'stop-opacity', fillOpac);
    svg.setAttributeNS(null, 'offset', lineOpac);  
 } 
  else if (shape == 'defs') {
    svg = this.container.ownerDocument.createElementNS(svgNamespace, 'defs');
    //svg.setAttributeNS(null, 'id', 'defs');
 } 
  else if (shape == 'group') {
    svg = this.container.ownerDocument.createElementNS(svgNamespace, 'g');
    svg.setAttributeNS(null, 'x', left + 'px');
    svg.setAttributeNS(null, 'y', top + 'px');
    svg.setAttributeNS(null, 'width', width + 'px');
    svg.setAttributeNS(null, 'height', height + 'px');  
    svg.setAttributeNS(null, 'fill-opacity', parseFloat(fillOpac));  
    svg.setAttributeNS(null, 'fill', fillColor);
 //} 

  //else if (shape == 'linearGradient') {
    //return false
 } 
 else if (shape == 'pattern') {
    svg = this.container.ownerDocument.createElementNS(svgNamespace, 'pattern');
    svg.setAttributeNS(null, 'x', left);
    svg.setAttributeNS(null, 'y', top);
    svg.setAttributeNS(null, 'width', width );
    svg.setAttributeNS(null, 'height', height);  
    svg.setAttributeNS(null, 'viewBox', viewBox);  
    svg.setAttributeNS(null, 'patternUnits', 'userSpaceOnUse');
 
 } 
  else if (shape == 'use') { 
    var svg = this.container.ownerDocument.createElementNS(svgNamespace, 'use');
    svg.setAttributeNS(xlinkNS,'xlink:href', imageHref);
 } 
 else if (shape == 'image') { 
   /* svg = this.container.ownerDocument.createElementNS(svgNamespace, 'g');
    svg.setAttributeNS(null, 'x', left + 'px');
    svg.setAttributeNS(null, 'y', top + 'px');
    svg.setAttributeNS(null, 'width', width + 'px');
    svg.setAttributeNS(null, 'height', height + 'px');  
    */
    var svg = this.container.ownerDocument.createElementNS(svgNamespace, 'image');
    svg.setAttributeNS(xlinkNS,'href', imageHref);
    svg.setAttributeNS(null, 'x', left  + 'px');
    svg.setAttributeNS(null, 'y', top + 'px');
    svg.setAttributeNS(null, 'width', width + 'px');
    svg.setAttributeNS(null, 'height', height + 'px');  
    svg.setAttributeNS(null, 'opacity', parseFloat(fillOpac));
    svg.setAttributeNS(null, 'preserveAspectRatio','none');//xMinYMin slice  
    //svg.setAttributeNS(null, 'viewbox', left+' '+top+' '+width+' '+height); 
    //Ext.get(this.container).removeAllListeners(isvg)   
    //svg.appendChild(isvg);
    /* 
    var rsvg = this.container.ownerDocument.createElementNS(svgNamespace, 'rect');
    rsvg.setAttributeNS(null, 'x', left + 'px');
    rsvg.setAttributeNS(null, 'y', top + 'px');
    rsvg.setAttributeNS(null, 'width', width + 'px');
    rsvg.setAttributeNS(null, 'height', height + 'px');  
    rsvg.style.fill = fillColor;  
    rsvg.style.stroke = lineColor;  
    rsvg.style.strokeWidth = lineWidth; 
    rsvg.setAttributeNS(null, 'opacity', '0.1');
    rsvg.style.strokOpacity = lineOpac;
    // Ext.get(this.container).removeAllListeners(rsvg)
     svg.appendChild(rsvg);   

     */
    //svg.setAttributeNS(null, 'color-rendering', fillColor);   
    //svg.setAttributeNS(null, 'display', 'inherit'); 
    
      //alert(fillOpac+'lkjlkj'); 
    //svg.setAttributeNS(null, 'fill-opacity', parseFloat(fillOpac));

    /* if (fillColor.length == 0){fillColor = 'none';}
    if (lineColor.length == 0){lineColor = 'none';}
    svg.style.fill = fillColor;  
    svg.style.stroke = lineColor;  
    svg.style.strokeWidth = lineWidth; 
    svg.style.fillOpacity = fillOpac;
    svg.style.strokOpacity = lineOpac;
     svg.style.setAttributeNS(null, 'fill', fillColor);
          svg.style.setAttributeNS(null, 'stroke', lineColor);
          svg.style.setAttributeNS(null, 'stroke-width', lineWidth);
          svg.style.setAttributeNS(null, 'fill-opacity', fillOpac);  
          svg.style.setAttributeNS(null, 'stroke-opacity',lineOpac);
    
   */
 } 
 
 if(shape == 'zoom') 
  {
        
  }else
  {                                          
       if(transform!='')
        {
         svg.setAttributeNS(null, 'transform', transform);      
        }
        
             var render=true;
        if(shape.indexOf('image')>=0){render=false;}
        //if(shape.indexOf('group')>=0){render=false;}
        if(shape.indexOf('linearGradient')>=0){render=false;}
        if(shape.indexOf('radialGradient')>=0){render=false;}
        if(shape.indexOf('stop')>=0){render=false;}  
        if(shape.indexOf('def')>=0){render=false;}
        if(shape.indexOf('filter')>=0){render=false;}
        if(shape.indexOf('feGaussianBlur')>=0){render=false;}
       
        
          
        //|| shape != 'group'
       //if(shape != 'image'  || shape != 'stop' || shape != 'def')
        if(render==true) 
        { 
                                                               
           //var set = this.container.ownerDocument.createElementNS(svgNamespace, "style");
            
           if (lineColor.length == 0){lineColor = 'none';} 
           if (fillColor.length == 0){fillColor = 'none';} 
           //if (lineWidth == NaN || lineWidth == 0 ){lineColor = '#000000';} 
           

          // set.setAttributeNS(null, 'stroke', lineColor);
          //set.setAttributeNS(null, 'stroke-width', lineWidth);
          //set.setAttributeNS(null, 'fill-opacity', fillOpac);  
          //set.setAttributeNS(null, 'stroke-opacity',lineOpac);
            //svg.appendChild(set);
           //svg.setAttributeNS(null, "style","fill:"+ fillColor+";stroke:"+lineColor+";strokeWidth:"+lineWidth+";fill-opacity:"+fillOpac+";stroke-opacity:"+lineOpac);  
           //   
           (fillColor!=''|| fillColor!=null )?svg.setAttributeNS(null, 'fill', fillColor):svg.setAttributeNS(null, 'fill', '#000000');
          
          //svg.setAttributeNS(null, 'filter', filter);
          svg.setAttributeNS(null, 'stroke', lineColor);
          svg.setAttributeNS(null, 'stroke-width', parseFloat(lineWidth));
          svg.setAttributeNS(null, 'fill-opacity', parseFloat(fillOpac));  
          svg.setAttributeNS(null, 'stroke-opacity',parseFloat(lineOpac));
          svg.setAttributeNS(null, 'stroke-linejoin','round')         
      
          /*     
          <a xlink:href="http://www.w3.org">
                <ellipse cx="2.5" cy="1.5" rx="2" ry="1"  fill="red" />
          </a>
          svg.style.stroke = lineColor;  
           svg.style.strokeWidth = lineWidth; 
           svg.style.fillOpacity = fillOpac;
           svg.style.strokOpacity = lineOpac;   
          if (fillColor.length == 0){fillColor = 'none';}
          
          if (lineColor.length == 0){lineColor = 'none';}
          */
         }   
         
         
     if(parent==''){
       this.svgRoot.appendChild(svg);
     }else{  
       if(document.getElementById(parent)){   
         var parentShape = document.getElementById(parent);
         parentShape.appendChild(svg);
        } 
     }   


          return svg;   
             
   }        
  
};   

SVGRenderer.prototype.resize = function(shape, fromX, fromY, toX, toY) {
   var deltaX = toX - fromX;
   var deltaY = toY - fromY;  
  if (shape.tagName == 'rect' ) 
   { 
    
 
      if (deltaX < 0) {
         shape.setAttributeNS(null, 'x', toX + 'px');
         shape.setAttributeNS(null, 'width', -deltaX + 'px');
       }
        else
       {
         shape.setAttributeNS(null, 'width', deltaX + 'px');
       }
  
      if (deltaY < 0) 
       {
        shape.setAttributeNS(null, 'y', toY + 'px');
        shape.setAttributeNS(null, 'height', -deltaY + 'px');
       }
        else 
       {
        shape.setAttributeNS(null, 'height', deltaY + 'px');
       }
    }
}   


SVGRenderer.prototype.duplicate = function(shape) 
 {
   var svg;
   svg =shape.cloneNode(false);
   //svg.setAttributeNS(null, 'fill', "#aa00aa");
   this.svgRoot.appendChild(svg);
  return svg;
 }; 

SVGRenderer.prototype.remove = function(shape) {
  //shape.parentNode.removeChild(shape);
  this.svgRoot.removeChild(shape);
}
SVGRenderer.prototype.removeAll = function() {  
 while( this.svgRoot.hasChildNodes () ){
   this.svgRoot.removeChild( this.svgRoot.firstChild );
 } 
} 
SVGRenderer.prototype.querySelected = function(shape,centerx,centery,width,height)
{ 
 var result = true;
  var shapes='names: g, image, rect, path, ellipse, circle, text, line, ';

 //if(shape.getBBox && shape) 
  if( shapes.indexOf(' '+shape.tagName+',')>0)
  {
 
  var box = shape.getBBox();
 }else
 {
  return false;
 }
 var p1x = box.x;
  if(Math.abs(p1x-centerx)>width){result = false}
 
 var p1y = box.y;
 if(Math.abs(p1y-centery)>height){result = false}
 
 var p2x = box.x+box.width;
 if(Math.abs(p2x-centerx)>width){result = false}

 var p2y = box.y;
 if(Math.abs(p2y-centery)>height){result = false}
 
 var p3x = box.x+box.width;
 if(Math.abs(p3x-centerx)>width){result = false}

 var p3y = box.y+box.height;                    
 if(Math.abs(p3y-centery)>height){result = false}
  
 var p4x = box.x;
if(Math.abs(p4x-centerx)>width){result = false}
 
 var p4y = box.y+box.height;
 if(Math.abs(p4y-centery)>height){result = false}
 
 if(result)
  {
    return { 'in':result, 'cornersx': p1x+','+p2x+','+p3x+','+p4x+',' ,'cornersy': p1y+','+p2y+','+p3y+','+p4y+',' };
  }
   else
  { 
     return { 'in':result } 
  }
//center.distanceFrom(point1);
 

}

SVGRenderer.prototype.searchBoxes = function()
{  
 var base = this.svgRoot;

 var  NumNodes = base.childNodes.length;
 var chain= '';
 for(i = 0;i < NumNodes;i++)
  {       
     if (base.childNodes[i].getBBox)
      {
        chain+=base.childNodes[i].id + ';'
      }
  }
  chain+=''
  return chain;

}  

SVGRenderer.prototype.DrawBorder= function(numNode, targetElement )
{   
  var shapes='names: g, image, rect, path, ellipse, circle, text, line, ';

 //if(shape.getBBox && shape) 
  if( shapes.indexOf(' '+targetElement.tagName+',')>0)
  {
   var bbox = targetElement.getBBox();
   var svgns = 'http://www.w3.org/2000/svg';

   var outline = this.container.ownerDocument.createElementNS(svgns, 'rect');
   outline.setAttributeNS( null, 'x', bbox.x - 2 );
   outline.setAttributeNS( null, 'y', bbox.y - 2 );
   outline.setAttributeNS( null, 'width',  bbox.width + 4 );
   outline.setAttributeNS( null, 'height', bbox.height + 4 );
   outline.setAttributeNS( null, 'stroke', '#ff00ff' );
   outline.setAttributeNS( null, 'fill', 'none' );
   outline.setAttributeNS( null, 'id', 'shapeBoxed'+numNode );

   targetElement.parentNode.insertBefore( outline, targetElement );
   return 'shapeBoxed'+numNode; 
  } 
   else 
  {
   return false
  }
}

SVGRenderer.prototype.getMarkup = function() { 
       
  return this.container.innerHTML;
} 
 
SVGRenderer.prototype.editCommand = function(shape, cmd, value)
{
  if (shape != null) {
    if (cmd == 'fillcolor') {
      if (value == '' || value =='none')
        shape.setAttributeNS(null, 'fill', 'none');
      else
        shape.setAttributeNS(null, 'fill', value);
    }
    else if (cmd == 'linecolor') {
      if (value != '')
        shape.setAttributeNS(null, 'stroke', value);
      else
        shape.setAttributeNS(null, 'stroke', 'none');
    }
    else if (cmd == 'linewidth') { 
      if( value=='none' || value=='')
       {
        shape.setAttributeNS(null, 'stroke-width', 0);
       }else{
        shape.setAttributeNS(null, 'stroke-width', parseInt(value) + 'px');
       } 
    } 
    else if (cmd == 'fillopacity') {
           if(shape.tagName=='image')
            {
             shape.setAttributeNS(null, 'opacity', parseFloat(value));
            }
             else
            {
                shape.setAttributeNS(null, 'fill-opacity', parseFloat(value));
            }    
      
    }
    else if (cmd == 'lineopacity') {         
      
      shape.setAttributeNS(null, 'stroke-opacity', parseFloat(value));
      
    }
    else if (cmd == 'filter') 
     {
       if (value != '')
        {                
        //shape.style.setProperty("filter", value) ;
         shape.setAttributeNS(null, 'filter', value);
         alert(value)
        }
     }  
    else if (cmd == 'textContent') 
     {
       if (value != '')
        {                
         shape.textContent=value;
        }
     }   
     else if (cmd == 'textSize') 
     {
       if (value != '')
        {                
          shape.setAttributeNS(null, 'font-size', parseFloat(eval(value)));
        }
     }
     else if (cmd == 'textFamily') 
     {
       if (value != '')
        {                
          shape.setAttributeNS(null, 'font-family', value);
        }
     } 
    else if (cmd == 'textSpacing') 
     {
       if (value != '')
        {                
          shape.setAttributeNS(null, 'letter-spacing', ''+value+'em');
          //alert(value) //bad letter-spacing word-spacing
        }
     } 
    else if (cmd == 'textLength') 
     {
       if (value != '')
        {                
          shape.setAttributeNS(null, '', ''+value+'');
          shape.setAttributeNS(null, 'lengthAdjust', 'spacing');//spacing spacingAndGlyphs
          //alert(value) //bad textLength
        }
     } 
     
     
    else if (cmd == 'textAnchor') 
     {
       if (value != '')
        {                
          shape.setAttributeNS(null, 'text-anchor', value);
        }
     }
    else if (cmd == 'textWeight') 
     {
       if (value != '')
        {                
          shape.setAttributeNS(null, 'font-weight', value);
        }
     }  
    else if (cmd == 'textStyle') 
     {
       if (value != '')
        {                
          shape.setAttributeNS(null, 'font-style', value);
        }
     }
    else if (cmd == 'textDecoration') 
     {
       if (value != '')
        {                
          shape.setAttributeNS(null, 'text-decoration', value);
        }  
          //alert(value) //bad  textDecoration
     }                  
    else if (cmd == 'textMode') 
     {
       if (value != '')
        {                
          shape.setAttributeNS(null, 'writing-mode', value);
        }
     } 
    else if (cmd == 'textDirection') 
     {
       if (value != '')
        {                
          shape.setAttributeNS(null, 'direction', value);
        }
     }  
    else if (cmd == 'textOrientation') 
     {
       if (value != '')
        {                
          shape.setAttributeNS(null, 'glyph-orientation-vertical', value);
        }
     } 
    else if (cmd == 'stopcolor') 
     {
       if (value != '')
        {                
          shape.setAttributeNS(null, 'stop-color', value);
        }
     } 
    else if (cmd == 'linearGradient') 
     {
       if (value != '')
        { 
          shape.setAttributeNS(null, 'x1', value.x1);
          shape.setAttributeNS(null, 'y1', value.y1);
          shape.setAttributeNS(null, 'x2', value.x2);
          shape.setAttributeNS(null, 'y2', value.y2);
        }
     }  
    else if (cmd == 'radialGradient') 
     {
       if (value != '')
        { 
          shape.setAttributeNS(null, 'x1', value.x1);
          shape.setAttributeNS(null, 'y1', value.y1);
          shape.setAttributeNS(null, 'x2', value.x2);
          shape.setAttributeNS(null, 'y2', value.y2);
        }
     }  
    else if (cmd == 'leftTop') 
     {
       if (value != '')
        { 
          shape.setAttributeNS(null, 'left', parseInt(value.left)+'px');
          shape.setAttributeNS(null, 'top', parseInt(value.top))+'px';
          
        }
     }  
    else if (cmd == 'cxcy') 
     {
       if (value != '')
        { 
          shape.setAttributeNS(null, 'cx', value.cx);
          shape.setAttributeNS(null, 'cy', value.cy);
          
        }
     }  
 
  }
}


SVGRenderer.prototype.queryCommand = function(shape, cmd)
{
  var result = '';
  
  if (shape != null) {
    if (cmd == 'fillcolor') {
      result = shape.getAttributeNS(null, 'fill');
      if (result == 'none')
        result = '';
    }
    else if (cmd == 'linecolor') {
      result = shape.getAttributeNS(null, 'stroke');
      if (result == 'none')
        result = '';
    }
    else if (cmd == 'linewidth') {
      result = shape.getAttributeNS(null, 'stroke');
      if (result == 'none')
        result = '';
      else
        result = shape.getAttributeNS(null, 'stroke-width');
    }
    else if (cmd == 'fillopacity') {
           if(shape.tagName=='image')
            {
             result= shape.getAttribute('opacity');
            }
             else
            {
             result= shape.getAttribute('fill-opacity');;
            }    
      
    }
    else if (cmd == 'lineopacity') {         
      
     result= shape.getAttribute('stroke-opacity');
      
    }
    else if (cmd == 'text') {         
         var text1=shape.textContent;
         var text2=shape.getAttribute('font-family')
         var text3=parseInt(shape.getAttribute('font-size'))
      
      result= {"data":text1,"family":text2,"size":text3};
      
    } 
    else if (cmd == 'points') {         
         result=shape.getAttribute('d');
      
    }    
    else if (cmd == 'stopcolor') {         
         result=shape.getAttribute('stop-color')
      
    }
    else if (cmd == 'box') {         
      result= shape.getBBox();
      
    }
    else if (cmd == 'linearGradient') {         
         var x1=shape.getAttribute('x1');
         var y1=shape.getAttribute('y1');
         var x2=shape.getAttribute('x2');
         var y2=shape.getAttribute('y2');
      result= {"x1":x1,"y1":y1,"x2":x2,"y2":y2};
      
    }
 
 
  }
  
  return result;
}

//----------------------------------------------------------------------------
// VMLRENDERER 1.0
// VML Renderer For RichDraw
// Dependencies:
// History:
// 2006-04-05 | Created
// --------------------------------------------------------------------------*/


function VMLRenderer() {
	this.base = AbstractRenderer;
}


VMLRenderer.prototype = new AbstractRenderer;


VMLRenderer.prototype.init = function(elem) 
 {
  this.container = elem;
  // this.container.style.overflow = 'hidden';
  this.container.unselectable = "on";
  // Add VML includes and namespace
  elem.ownerDocument.namespaces.add("v", "urn:schemas-microsoft-com:vml");
  var style = elem.ownerDocument.createStyleSheet();
  style.addRule('v\\:*', "behavior: url(#default#VML); display:inline-block");
  //NOT VML biewBox
  //http://blogs.msdn.com/ie/archive/2008/03/18/webbrowser-control-rendering-modes-in-ie8.aspx 

 } 




var proporx=1;
var propory=1;

VMLRenderer.prototype.view = function(left,top,width,height,viewBox,bgcolor) {
  var tokens = viewBox.split(' '); 
       
  var margin=100; 
  var wFront=parseInt(this.container.style.width)
  var hFront=parseInt(this.container.style.height)
  var tC=0 + ' ' + 0 + ' ' + wFront + ' ' + hFront;
  tokensCanvas= tC.split(' '); 

  var w=parseFloat(tokens[2]);
  var h=parseFloat(tokens[3]); 
  var wImage = w - parseFloat(tokens[0]);  
  var hImage = h - parseFloat(tokens[1]);
  var wCanvas = wFront;
  var hCanvas = hFront;
  proporImage = hImage / wImage; 
  proporCanvas = hCanvas / wCanvas; 

  //this.container.title= initialFile +'     '+wImage+' x '+hImage;


  if(bgcolor != '')
   {
    this.container.style.backgroundColor=bgcolor;
   } else{
    this.container.style.backgroundColor="#ffffff";
   }
if(viewMode=='preview')
 {
  if(proporCanvas==proporImage)
   {
      this.container.style.width =wFront+'px';
      this.container.style.height =hFront+'px';
      this.container.style.left =0+'px' 
      this.container.style.top =0+'px' 
      canvasLeft = 0;
   canvasTop = 0; 
   canvasWidth =wFront ;
   canvasHeight = hFront; 
   zoominit1= 0+' '+0+' '+wFront+' '+hFront;
   zoominit = viewBox;
   zoominit2 = zoominit1;  
  
  
   proporx = 1;
   propory = 1;
   
   }
  if(proporCanvas<proporImage)
   {    
      var proportion= wFront/hFront;  
      //var image_proportion= width/height;
      var image_proportion= w/h;
      var W=hFront*image_proportion; 
      var leftover=(wFront-W)/2;
      
      this.container.style.width =W+'px';
      this.container.style.height =hFront+'px';
      this.container.style.left =leftover+'px' 
      this.container.style.top =0+'px' 
      //alert('Horizontal '+wFront+','+hFront+' '+image_proportion+' '+W+' '+leftover+' ____'+ this.container.style.width)
   canvasLeft = leftover;
   canvasTop = 0; 
   canvasWidth =W ;
   canvasHeight = hFront; 
   zoominit1= viewBox;//leftover+' '+0+' '+W+' '+hFront;
   zoominit1=0+' '+0+' '+W+' '+hFront;    
   zoominit = viewBox;
   zoominit2 = zoominit1;  
  
  
   proporx = W/w;
   propory = hFront/h;
   
 
    } 
  if(proporCanvas>proporImage)
   {    
      var proportion= hFront/wFront;  
      //var image_proportion= width/height;
      var image_proportion= h/w;
      var H=wFront*image_proportion; 
      var leftover=(hFront-H)/2;
      
      this.container.style.width =wFront+'px';
      this.container.style.height =H+'px';
      this.container.style.left =0+'px' 
      this.container.style.top =leftover+'px'   
      
   canvasLeft = 0;
   canvasTop = leftover; 
   canvasWidth = wFront;
   canvasHeight = H; 
   //zoominit1 = 0+' '+leftover+' '+wFront+' '+H;
   zoominit1 = 0+' '+0+' '+wFront+' '+H;    
   zoominit = viewBox;
   zoominit2 = viewBox;//zoominit1;  

   proporx = wFront/w;
   propory = H/h;
 
    }   
     // proporx = width/tokens[2];
     //propory = height/tokens[2];


   
  } 
if(viewMode=='canvas')
 {
   this.container.style.left = 0 + 'px';   
   this.container.style.top = 0 + 'px';                                 
   this.container.style.width = wFront + 'px';
   this.container.style.height = hFront + 'px';
   
   //  margins 10%    
   var percent=10;
   var percentX = wImage / percent; 
   var percentY = hImage / percent; 
   var cornerNEx = parseFloat(tokens[0])-percentX; 
   var cornerNEy = parseFloat(tokens[1])-percentY;
   var percentRectW=wImage + percentX*2;
   var percentRectH=hImage + percentY*2; 
 
   //document.title= initialFile +'     '+wImage+' x '+hImage;
   // ajust proporImage to proporCanvas
  if(proporCanvas==proporImage)
   {  
      cornerNEx = parseFloat(tokens[0])-percentX
      cornerNEy = parseFloat(tokens[1])-percentY  
      var wi=percentRectW;
      var he=percentRectH;//hImage+percentY+addHimage; 
      zoominit=viewBox;
      zoominit1 = (-percentX) +' '+(-percentY)+' '+wi+' '+he;
      proporx =(w*(100-percent*2)/100)/w;
      propory =( h*(100-percent*2)/100)/h; 
      zoominit2=zoominit1; 
      tokensZoom=tokensCanvas;//viewBox.split(' '); ;//zoominit1.split(' '); 
      
   }

  if(proporCanvas<proporImage)
   {    
        
        // add to hImage
        var newWimage = percentRectW * ((wCanvas * percentRectH) / (hCanvas * percentRectW))  ;//newRectH *
        var diffImages=newWimage-w;
        cornerNEx = parseFloat(tokens[0]) - (diffImages / 2);
        var wi=newWimage;
        var he=percentRectH;//hImage+percentY+addHimage; 
        zoominit=viewBox;
        //zoominit1 = cornerNEx+' '+cornerNEy+' '+wi+' '+he;
      //zoominit1 = (-percentX) +' '+(-percentY)+' '+wi+' '+he;
      proporx =wFront/wi;
      propory = wFront/wi; 
      var invPropor =wi/ wFront; 
     zoominit1 = (proporx*cornerNEx) +' '+(propory*cornerNEy)+' '+wi+' '+he;
      zoominit2=zoominit1; 
      var tZ = (invPropor*cornerNEx) +' '+(invPropor*cornerNEy)+' '+wi+' '+he;

       
        tokensZoom=tokensCanvas;//tZ.split(' ');//viewBox.split(' '); ;//zoominit1.split(' ');  
     }
  if(proporCanvas>proporImage)
   {    
        // add to hImage
        var newHimage = percentRectH * ((hCanvas * percentRectW) / (wCanvas * percentRectH))  ;//newRectH *
        var diffImages=newHimage-h;
        cornerNEy = parseFloat(tokens[1]) - (diffImages / 2);
        var wi=percentRectW;
        var he=newHimage;//hImage+percentY+addHimage; 
        zoominit=viewBox;                                    
      proporx =wFront/wi;
      propory = wFront/wi; 
     
     zoominit1 = (proporx*cornerNEx) +' '+(propory*cornerNEy)+' '+wi+' '+he;
     zoominit2=zoominit1; 
     tokensZoom=zoominit1.split(' '); 
 
   } 


  }
}



VMLRenderer.prototype.zoomFrame = function(zoom){ 
   //myOPF.viewBox=zoom;  
   //load(myOPF,c);
   //document.getElementById("source").value=myOPF.toJSONString();
}
VMLRenderer.prototype.rectDoc = function(viewBox) {
     var tokens2 = zoominit2.split(' ');    
     var tokens = zoominit.split(' ');
  var shape = document.getElementById('rectDoc');
  if (shape) {
    this.remove(shape);
  } 
  var rect=this.container.ownerDocument.createElement('v:rect');
  rect.id='rectDoc';
  rect.style.position = 'absolute';
  rect.style.left =-parseInt(tokens2[0]); 
  rect.style.top = -parseInt(tokens2[1]);
  rect.style.width = parseInt(tokens[2]);
  rect.style.height = parseInt(tokens[3]);
  rect.setAttribute('filled', 'false');
   rect.setAttribute('stroked', 'true'); 
  rect.setAttribute('strokeweight', 2); 
  rect.setAttribute('strokecolor',"#ff0000"); 
   //this.container.appendChild(rect);
   //this.container.insertBefore(rect, this.container.firstChild );
  //alert(docx+' '+docy+' '+docw+' '+doch+' '+viewBox) 
}   
VMLRenderer.prototype.rectCanvas = function(docx,docy,docw,doch,viewBox) {
  
     var tokens = zoominit1.split(' ');    
  var shape = document.getElementById('rectCanvas');
  if (shape) {
    this.remove(shape);
  }
  
  var rect=this.container.ownerDocument.createElement('v:rect');
  rect.id='rectBackground'; 
  rect.style.position = 'absolute';
  rect.style.left = tokens[0] ;
  rect.style.top =tokens[1];
  rect.style.width=tokens[2];
  rect.style.height= tokens[3] ;  
  rect.setAttribute('filled', 'true');
  rect.setAttribute('fillcolor',"#666666"); 
  rect.setAttribute('stroked', 'false');  
  
   this.container.insertBefore(rect, this.container.firstChild );
  
}

VMLRenderer.prototype.removeAll = function(){
	while (this.container.hasChildNodes()) {
		this.container.removeChild(this.container.firstChild);
	}
}   

function VMLviewBox(container,left,top,width,height){
  var tokens = zoominit2.split(' ');  
  left *= proporx;
  left = left - parseFloat(tokens[0]);
  top *= propory; 
  top = top - parseFloat(tokens[1]);   
  width *= proporx;
  height *= propory; 
  
  return {"x":parseFloat(Math.round(left)), "y":parseFloat(Math.round(top)), "w":parseFloat(Math.round(width)), "h":parseFloat(Math.round(height))};
}   
function VMLviewBox1(container,left,top,width,height){
  var tokens = zoominit2.split(' ');  
  left *= proporx;
  left = left - parseFloat(tokens[0]);
  top *= propory; 
  top = top - parseFloat(tokens[1]);   
  width *= proporx;
  height *= propory; 
  
  return {"x":parseFloat(Math.round(left)), "y":parseFloat(Math.round(top)), "w":parseFloat(Math.round(width)), "h":parseFloat(Math.round(height))};
}   


VMLRenderer.prototype.create = function(shape, fillColor, lineColor, fillOpac, lineOpac, lineWidth, left, top, width, height, textMessaje, textSize, textFamily, imageHref, points, transform, parent) {
   var tokens = zoominit2.split(' ');  

   var zoom=VMLviewBox(this.container,left,top,width,height);
   
   left=zoom.x;  
   top=zoom.y;
   width=zoom.w;
   height=zoom.h;

   var zoom=VMLviewBox(this.container,left,top,textSize,textSize);
   //if(zoom.w<1){zoom.w=1}    
   if(zoom.y== undefined){left=0}
   if(zoom.x== undefined){top=0} 
   if(zoom.w== undefined){width=0}   
   if(zoom.h== undefined){height=0}
   textSize=zoom.h;  

   var zoom=VMLviewBox(this.container,left,top,lineWidth*2/3,lineWidth);
   //if(zoom.w<1){zoom.w=1}
   lineWidth=zoom.w;  
   var vml;
 var shap=1;
  if (shape == 'rect') { 
  
    vml = this.container.ownerDocument.createElement('v:rect');  
    vml.style.position = 'absolute';
    vml.style.left = left; 
    vml.style.top = top;
    vml.style.width = width;
    vml.style.height = height;
  }
  else if (shape == 'roundrect') {
            vml = this.container.ownerDocument.createElement('v:roundrect'); 
            vml.style.position = 'absolute';
            vml.style.left = left;
            vml.style.top = top;
            vml.style.width = width;    
            vml.style.height = height;
            vml.setAttribute('arcsize', '20%');   
            
  }
  else if (shape == 'ellipse') {
    vml = this.container.ownerDocument.createElement('v:oval');  
    vml.style.left = left;
    vml.style.top = top;
    vml.style.width = width; 
    vml.style.height = height;
    vml.style.position = 'absolute';
  }
  else if (shape == 'line') {  
    
    vml = this.container.ownerDocument.createElement('v:line'); 
    vml.setAttribute('from', left + 'px,' + top + 'px');
    vml.setAttribute('to', left + 'px,' + top + 'px');

  }   
  else if (shape == 'polyline') {
    vml = this.container.ownerDocument.createElement('v:polyline');
    vml.setAttribute("points", points); 
    
  }    
  else if (shape == 'path') 
   {   
    vml = this.container.ownerDocument.createElement('v:shape');  
    var tokens = zoominit1.split(' ');  
    var tokens1 = zoominit1.split(' ');         
    var tokens2 = zoominit2.split(' ');   
    tokens[0]=0;
    tokens[1]=0;
    var path=points;
    path=path.replace(/, /g, ','); 
    path=path.replace(/ ,/g, ',');
    var ps =path.split(" ")
    var pcc = "";
   
    var re = /^[-]?\d*\.?\d*$/; 
    var contArc=0; 
    var isArc=false;
    for(var i = 0; i < ps.length; i++)
    { 
     if(ps[i].indexOf(',')>0){  
      
       var point =ps[i].split(","); 
       var char1=point[0].substring(0,1); 
     
       if (!char1.match(re))        
        { 
           var num0prev= parseFloat(point[0].substring(1));
           var zoom=VMLviewBox(this.container,num0prev*1+(parseInt(tokens2[0])*0),0,parseInt(tokens2[2]),parseInt(tokens2[3]));
           num0=zoom.x;  
   
           var text=char1;
        }else{ 
            var num0prev= parseFloat(point[0]);
            var zoom=VMLviewBox(this.container,num0prev*1+(parseInt(tokens2[0])*0),0,parseInt(tokens2[2]),parseInt(tokens2[3]));
            num0=zoom.x;  
  
        }  
       point[1]= parseFloat(point[1]);  
       var zoom=VMLviewBox(this.container,0,point[1],parseInt(tokens2[2]),parseInt(tokens2[3]));
       point[1]=zoom.y;  
       var cx=num0+parseInt(tokens2[0]); 
       var cy=point[1]+parseInt(tokens2[1]);   
       pcc+=text+cx+','+cy+' ';
     }
      else
     {  
        pcc+=ps[i]+' ';
     }
   
    }
   ////////////////////   
    var thispath=pcc;
    thispath=thispath.replace(/M/g,'m');
    thispath=thispath.replace(/C/g,'c');  
    thispath=thispath.replace(/L/g,'l'); 
    thispath=thispath.replace(/z/g,'x');      
   
   //document.getElementById('source').value=points+'\r\n'+thispath +'\r\n'+'________'+'\r\n'
   var zoom=VMLviewBox(this.container,tokens[0],tokens[1],tokens[2],tokens[3]);
   
    vml.style.position="absolute";  
    vml.style.width= zoom.w+"px";
    vml.style.height=zoom.h+"px";
    vml.style.left=zoom.x+"px";  
    vml.style.top=zoom.y+"px";    
    vml.setAttribute('coordsize', zoom.w+','+zoom.h); 
 
    var path01 = this.container.ownerDocument.createElement('v:path');  
    path01.setAttribute("v", thispath+' e'); 
 
 
    
    vml.appendChild(path01)
    
   }
   
   else if (shape == 'controlpath')
   {
    
    vml = this.container.ownerDocument.createElement('v:shape');  
      vml.style.position="absolute";  
    vml.style.width= 700+"px";
    vml.style.height=500+"px";
    vml.style.left=left+"px";  
    vml.style.top=top+"px";  
    vml.setAttribute('coordsize', '700,500');   
     
    var path01 = this.container.ownerDocument.createElement('v:path');  
    path01.setAttribute('v', 'm '+left+','+top+' c'+(left+1)+','+(top+1)+' e ');  

     vml.appendChild(path01)
    } 
    else if (shape == 'image') {   
     var data =imageHref;//document.forms[0].option_text_message.value;
     vml = this.container.ownerDocument.createElement('v:image'); 
     vml.setAttribute('src',imageHref);
     vml.style.position="absolute";  
     vml.style.width=width+"px";
     vml.style.height=height+"px";
     vml.style.left=left+"px";  
     vml.style.top=top+"px";  
     vml.style.margin=0+"px";  
     vml.style.padding=0+"px";  
     if (fillColor != ''  || fillColor != 'none') {
       vml.setAttribute('filled', 'false');
       vml.setAttribute('fillcolor', fillColor);
     }
     else {
       vml.setAttribute('filled', 'false');
     }
    vml.setAttribute('strokeweight','0px');// parseFloat(lineWidth)+'px');
   vml.setAttribute('stroked', 'false');  
   vml.setAttribute('strokecolor','#000000');//lineColor);
   
   
    }
    
 else if (shape == 'text') 
  {   
   
    var data =textMessaje;
    vml = this.container.ownerDocument.createElement('v:shape');
    vml.style.position="absolute";  
    //vml.setAttribute('coordorigin',left+', '+top);
     //vml.style.coorsize= '';
     coordorigin="0, 0" 
     
     var ts=isNaN(textSize)
     if(ts==true){
     textSize=10;
     }
    vml.style.width= textSize+'px';//tokens[2]+'px'
    vml.style.height=textSize+'px';
    vml.style.left=(left+"px");  
    vml.style.top=(top-(textSize*1/4)+"px");  
    vml.style.margin=0+"px"; 
     vml.style.padding=0+"px";  
     vml.setAttribute('path','m '+0+' '+0+' r '+(textSize*data.length)+' '+0+' e'); 
     var textPathObj = this.container.ownerDocument.createElement("v:textpath");
     textPathObj.setAttribute('string', data); 
      textPathObj.setAttribute('fitshape','false'); 
     textPathObj.setAttribute('trim', 'false'); 
     textPathObj.setAttribute('fitpath', 'false');
     textPathObj.setAttribute('on','true');  
     textPathObj.style.fontFamily=textFamily;  
     textPathObj.style.fontSize=textSize+'px'; 
     textPathObj.setAttribute('vTextKern','true');  
     textPathObj.setAttribute('text-align','center');  
     
      var pathObj = this.container.ownerDocument.createElement("v:path");
     pathObj.setAttribute('textpathok', 'true');  
      vml.appendChild(textPathObj);  
     vml.appendChild(pathObj);  
    
    
  }    


    
 else if (shape == 'texto') 
  {  
    vml = this.container.ownerDocument.createElement('v:shape');
    vml.style.position="absolute";  
   
     vml.style.coordsize=1000+', '+1000;
    vml.style.width= 1000;
    vml.style.height=1000;
    vml.style.left=left;  
    vml.style.top=top-parseFloat(textSize);  
     
     vml.style.padding=0;  
    var textBox = this.container.ownerDocument.createElement("v:textbox");
     textBox.setAttribute('mso-rotate-with-shape',true)
     var divtext = this.container.ownerDocument.createElement("div");  
     divtext.style.coordorigin=0+', '+(0);      
     divtext.style.margin=0;   
     divtext.style.fontFamily=textFamily; 
     divtext.style.margin=0; 
     divtext.style.padding=0; 
     divtext.style.vRotateLetters=true;
     divtext.style.fontSize=parseFloat(textSize); 
    
     
           
    

     
    divtext.style.color=fillColor;
     
     
     
     
     
     //divtext.setAttribute('v-rotate-letters','true');
    if(transform.indexOf('rotate')>=0)
    {
     
      myRotate1=transform.split('rotate(');
      myRotate2=myRotate1[1].split(')');  
      myRotate3=myRotate2[0].split(',');  
     
      //divtext.setAttribute('mso-rotate',myRotate3[0]);
      //textBox.style.msoRotate= myRotate3[0];
      //textBox.style.centerX=myRotate3[1]; 
      //textBox.style.centerY=myRotate3[2];
      //vml.style.rotation= myRotate3[0];
      //vml.style.centerX=myRotate3[1]; 
      //vml.style.centerY=myRotate3[2];
        vml.setAttribute('rotation',myRotate3[0]+'Deg'); 
    }        

     divtext.innerHTML=textMessaje;
     textBox.appendChild(divtext);       
    
     vml.appendChild(textBox);  
    
  } 
    else if (shape == 'defs') {
   var vml; 
   
 } 
   
    else if (shape == 'group') {   
    vml = this.container.ownerDocument.createElement('v:group'); 
    vml.style.left=left+"px";  
    vml.style.top=top+"px";  
  }
 
  if(shape == 'zoom' || shape == 'defs') 
  {
        
  }else
  {   
    if(transform.indexOf('rotate')>=0)
    {
      myRotate1=transform.split('rotate(');
      myRotate2=myRotate1[1].split(')');  
      myRotate3=myRotate2[0].split(',');  
     
       vml.style.rotation= myRotate3[0]+'Deg';
       vml.style.centerX=myRotate3[1]; 
       vml.style.centerY=myRotate3[2];
       
    }                                     
       
        if(shape != 'image' )
         {      
                   //alert(fillColor)
                   if (fillColor != ''  || fillColor != 'none' ) 
                    { 
                      vml.setAttribute('filled', 'true'); 
                      vml.setAttribute('fillcolor', fillColor); 
                      
                    }
                     else 
                    {
                      vml.setAttribute('filled', 'false');
                    }

         
                if(lineWidth==0 || lineWidth=='none' || lineColor== 'none' )    
                {
                  vml.setAttribute('stroked', 'false');  
                }
                 else 
                {  
                  //if(isNaN(lineColor)==false){alert('-'+lineColor+'-');lineColor='#000000';lineWidth=1;}
                  vml.setAttribute('stroked', 'true');
                  vml.setAttribute('strokecolor', lineColor);
                  vml.setAttribute('strokeweight', lineWidth);
                  var stroke = this.container.ownerDocument.createElement('v:stroke'); 
                  stroke.setAttribute("opacity", parseFloat(lineOpac));
                  vml.appendChild(stroke);
                  
                }

               if (fillOpac != '') 
                { 
                  if (fillOpac == 'none' || fillColor=='none'){fillOpac=0;}
                  var fill = this.container.ownerDocument.createElement('v:fill'); 
                  fill.setAttribute("opacity",parseFloat(fillOpac));  
                  //alert(fillOpac)
                  vml.appendChild(fill);
                }
          }     
  } 
  if(parent==''){   
   if(vml){
   this.container.appendChild(vml);}
  }else{ 
    if(document.getElementById(parent)){ 
     var parentShape = document.getElementById(parent);
     if(vml||vml!=null ){ 
      parentShape.appendChild(vml);
     } 
    } 
  }  
   //var parentDoc = document.getElementById('mydraw');
   //parentDoc.appendChild(vml);
  return vml;
};   

VMLRenderer.prototype.resize = function(shape, fromX, fromY, toX, toY) {
   var deltaX = toX - fromX;
   var deltaY = toY - fromY;  
  if (shape.tagName == 'rect' ) 
   { 
    
 
      if (deltaX < 0) {
         shape.style.left=toX + 'px';
         shape.style.width=-deltaX + 'px';
       }
        else
       {
         shape.style.width= deltaX + 'px';
       }
  
      if (deltaY < 0) 
       {
        shape.style.top=toY + 'px';
        shape.style.height=-deltaY + 'px';
       }
        else 
       {
        shape.style.height=deltaY + 'px';
       }
    }
}  
VMLRenderer.prototype.duplicate = function(shape) 
 {
   var vml;
   vml =shape.cloneNode(false);
   //vml.setAttribute('fillcolor', "#aa00aa");
   vml.setAttribute('filled', "false");
   this.container.appendChild(vml);
  return vml;
  
 };
VMLRenderer.prototype.querySelected = function(shape,centerx,centery,width,height)
{ 
 var result = true;
  var shapes='names: group, image, rect, path, ellipse, circle, text, line, ';

 //if(shape.getBBox && shape) 
  if( shapes.indexOf(' '+shape.tagName+',')>0)
  {
 
  var box =  this.bounds(shape);
 }else
 {
  return false;
 }
 var p1x = box.x;
  if(Math.abs(p1x-centerx)>width){result = false}
 
 var p1y = box.y;
 if(Math.abs(p1y-centery)>height){result = false}
 
 var p2x = box.x+box.width;
 if(Math.abs(p2x-centerx)>width){result = false}

 var p2y = box.y;
 if(Math.abs(p2y-centery)>height){result = false}
 
 var p3x = box.x+box.width;
 if(Math.abs(p3x-centerx)>width){result = false}

 var p3y = box.y+box.height;                    
 if(Math.abs(p3y-centery)>height){result = false}
  
 var p4x = box.x;
if(Math.abs(p4x-centerx)>width){result = false}
 
 var p4y = box.y+box.height;
 if(Math.abs(p4y-centery)>height){result = false}
 
 if(result)
  {
    return { 'in':result, 'cornersx': p1x+','+p2x+','+p3x+','+p4x+',' ,'cornersy': p1y+','+p2y+','+p3y+','+p4y+',' };
  }
   else
  { 
     return { 'in':result } 
  }
//center.distanceFrom(point1);
 

}

VMLRenderer.prototype.searchBoxes = function()
{  
 var base = this.container;

 var  NumNodes = base.childNodes.length;
 var chain= '';
 for(i = 0;i < NumNodes;i++)
  {       
     if (this.bounds(base.childNodes[i]))
      {
        chain+=base.childNodes[i].id + ';'
      }
  }
  chain+=''
  return chain;

}  

VMLRenderer.prototype.DrawBorder= function(numNode, targetElement )
{   
  var shapes='names: group, image, rect, path, ellipse, circle, text, line, ';

 //if(shape.getBBox && shape) 
  if( shapes.indexOf(' '+targetElement.tagName+',')>0)
  {
   var bbox = this.bounds(targetElement);

   var outline = this.container.ownerDocument.createElement('v:rect');  
   outline.setAttribute('x', bbox.x - 2 );
   outline.setAttribute('y', bbox.y - 2 );
   outline.setAttribute('width',  bbox.width + 4 );
   outline.setAttribute('height', bbox.height + 4 );
   outline.setAttribute('stroke', '#ff00ff' );
   outline.setAttribute('fill', 'none' );
   outline.setAttribute('id', 'shapeBoxed'+numNode );

   targetElement.parentNode.insertBefore( outline, targetElement );
   return 'shapeBoxed'+numNode; 
  } 
   else 
  {
   return false
  }
}


VMLRenderer.prototype.getMarkup = function() { 
      
  //return this.container.parentNode.innerHTML;  
  return this.container.innerHTML;
}

VMLRenderer.prototype.remove = function(shape) {
  if(shape!=null){ shape.removeNode(true); }
} 

VMLRenderer.prototype.removeAll = function() {  
 while( this.container.hasChildNodes () ){
   this.container.removeChild( this.container.firstChild );
   //this.container.removeNode( this.container.firstChild );
 } 
}

VMLRenderer.prototype.editCommand = function(shape, cmd, value)
{
  if (shape != null) {
    if (cmd == 'fillcolor') {
      if (value == '' || value =='none')
        shape.style.fill='none';
      else
        shape.style.fill=value;
    }
    else if (cmd == 'linecolor') {
      if (value != '')
        shape.style.stroke=value;
      else
        shape.style.stroke='none';
    }
    else if (cmd == 'linewidth') { 
      if( value=='none' || value=='')
       {
        shape.style.strokeWidth=0;
       }else{
        shape.style.strokeWidth=parseInt(value) + 'px';
       } 
    } 
    else if (cmd == 'fillopacity') {
           if(shape.tagName=='image')
            {
             shape.style.opacity=parseFloat(value);
            }
             else
            {
                shape.style.fillOpacity=parseFloat(value);
            }    
      
    }
    else if (cmd == 'lineopacity') {         
      
      shape.style.strokeOpacity=parseFloat(value);
      
    }
    else if (cmd == 'filter') 
     {
       if (value != '')
        {                
        //shape.style.setProperty("filter", value) ;
         shape.style.filter=value;
         //alert(value)
        }
     }  
    else if (cmd == 'textContent') 
     {
       if (value != '')
        {                
         shape.textContent=value;
        }
     }   
     else if (cmd == 'textSize') 
     {
       if (value != '')
        {                
          shape.style.fontSize=parseFloat(eval(value));
        }
     }
     else if (cmd == 'textFamily') 
     {
       if (value != '')
        {                
          shape.style.fontFamily=value;
        }
     } 
    else if (cmd == 'textSpacing') 
     {
       if (value != '')
        {                
          shape.style.letterSpacing=''+value+'em';
          //alert(value) //bad letter-spacing word-spacing
        }
     } 
    else if (cmd == 'textLength') 
     {
       if (value != '')
        {                
          //shape.style.=''+value+'';
          shape.style.lengthAdjust='spacing';//spacing spacingAndGlyphs
          //alert(value) //bad textLength
        }
     } 
     
     
    else if (cmd == 'textAnchor') 
     {
       if (value != '')
        {                
          shape.style.textAnchor=value;
        }
     }
    else if (cmd == 'textWeight') 
     {
       if (value != '')
        {                
          shape.style.fontWeight=value;
        }
     }  
    else if (cmd == 'textStyle') 
     {
       if (value != '')
        {                
          shape.style.fontStyle=value;
        }
     }
    else if (cmd == 'textDecoration') 
     {
       if (value != '')
        {                
          shape.style.textDecoration=value;
        }  
          //alert(value) //bad  textDecoration
     }                  
    else if (cmd == 'textMode') 
     {
       if (value != '')
        {                
          shape.style.writingMode=value;
        }
     } 
    else if (cmd == 'textDirection') 
     {
       if (value != '')
        {                
          shape.style.direction=value;
        }
     }  
    else if (cmd == 'textOrientation') 
     {
       if (value != '')
        {                
          shape.style.glyphOrientationVertical=value;
        }
     } 
    else if (cmd == 'stopcolor') 
     {
       if (value != '')
        {                
          shape.style.stopColor=value;
        }
     } 
    else if (cmd == 'linearGradient') 
     {
       if (value != '')
        { 
          shape.style.x1=value.x1;
          shape.style.y1=value.y1;
          shape.style.x2=value.x2;
          shape.style.y2=value.y2;
        }
     }  
    else if (cmd == 'radialGradient') 
     {
       if (value != '')
        { 
          shape.style.x1=value.x1;
          shape.style.y1=value.y1;
          shape.style.x2=value.x2;
          shape.style.y2=value.y2;
        }
     }  
    else if (cmd == 'leftTop') 
     {
       if (value != '')
        { 
          shape.style.left=parseInt(value.left)+'px';
          shape.style.top=parseInt(value.top)+'px';
          
        }
     }  
    else if (cmd == 'cxcy') 
     {
       if (value != '')
        { 
          shape.style.cx=value.cx;
          shape.style.cy=value.cy;
          
        }
     }  
 
  }
}


VMLRenderer.prototype.queryCommand = function(shape, cmd)
{
  var result = '';
  
  if (shape != null) {
    if (cmd == 'fillcolor') {
      result = shape.style.fill;
      if (result == 'none')
        result = '';
    }
    else if (cmd == 'linecolor') {
      result = shape.style.stroke;
      if (result == 'none')
        result = '';
    }
    else if (cmd == 'linewidth') {
      result = shape.style.stroke;
      if (result == 'none')
        result = '';
      else
        result = shape.style.strokeWidth;
    }
    else if (cmd == 'fillopacity') {
           if(shape.tagName=='image')
            {
             result= shape.style.opacity;
            }
             else
            {
             result= shape.style.fillOpacity;
            }    
      
    }
    else if (cmd == 'lineopacity') {         
      
     result= shape.style.strokeOpacity;
      
    }
    else if (cmd == 'text') {         
         var text1=shape.textContent;
         var text2=shape.style.fontFamily;
         var text3=parseInt(shape.style.fontSize);
      
      result= {"data":text1,"family":text2,"size":text3};
      
    } 
    else if (cmd == 'points') {         
         result=shape.style,d;
      
    }    
    else if (cmd == 'stopcolor') {         
         result=shape.style.stopColor
      
    }
    else if (cmd == 'box') {         
      result= this.bounds(shape);
      
    }
    else if (cmd == 'linearGradient') {         
         var x1=shape.style.x1;
         var y1=shape.style.y1;
         var x2=shape.style.x2;
         var y2=shape.style.y2;
      result= {"x1":x1,"y1":y1,"x2":x2,"y2":y2};
      
    }
 
 
  }
  
  return result;
}


//////////


/////////////////////////////////////
// INFO     
/////////////////////////////////////


/*
(   (  ( ( ( ( (( SVG )) ) ) ) )  )   )
*/



SVGRenderer.prototype.info = function(shape)
{   
var shInfo = {}; 
//shInfo.id =null; 
//if(shInfo.id !=null){  
 
/*
* * * * * * * * *
*/

if(shape.id != "tracker") 
{  
 if(shape.getAttribute('id')==null){
   var nid='shape:' + createUUID(); 
   shape.setAttributeNS(null, 'id',  nid);
   //shInfo.id = shape.id.substr(6); 
 
 }                                       
 shInfo.id =shape.getAttribute('id');
 //if(shInfo.id!=''){shInfo.animate=shapesAnimated[shInfo.id]}  
 shInfo.type = shape.tagName;
 
  if(shape.tagName=='svg')
  { 
    shInfo.type ='doc';
    shInfo.left=(shape.getAttribute( 'x'))?parseFloat(shape.getAttribute( 'x')):0;
    shInfo.top=(shape.getAttribute( 'y'))?parseFloat(shape.getAttribute( 'y')):0;
    shInfo.width=(shape.getAttribute('width'))?parseFloat(shape.getAttribute('width')):800;
    shInfo.height=(shape.getAttribute('height'))?parseFloat(shape.getAttribute('height')):600;  
    shInfo.viewBox=(shape.getAttribute('viewBox'))?shape.getAttribute('viewBox'):'0 0 800 600';
    shInfo.bgcolor="";//this.container.style.backgroundColor;  
    
    return shInfo; 
    
  }
  else
  {
    
  } 

 if (shape.hasAttributeNS(null,'transform')) { 
     shInfo.transform = shape.getAttribute('transform');
  }else{
     shInfo.transform ='';
  }   
 
 if (shape.tagName =='defs') 
   { 
    //alert('dfasd'); 
    if(shape.getAttribute('id')==null || shape.getAttribute('id')=='')
     {  
      
      //var nid='shape:' + createUUID(); 
      shape.setAttributeNS(null, 'id',  'defs');
      shInfo.id=shape.getAttribute('id');
     }
     shInfo.id=shape.getAttribute('id');
   }
 if (shape.tagName == 'feGaussianBlur') 
  {
    shInfo.left = shape.getAttribute('stdDeviation');
  } 

  if(shape.tagName == "text"){   
 
   shInfo.textFamily = shape.getAttribute('font-family')
   shInfo.textSize = parseInt(shape.getAttribute('font-size'))
   shInfo.top = parseFloat(shape.getAttribute('y'))
   shInfo.left = parseFloat(shape.getAttribute('x'))
   shInfo.text = shape.textContent 
   shInfo.lineWidth = parseFloat(shape.getAttribute('stroke-width'))

   //shInfo.text = shape.nodparseFloatue;
   }
 var rendering=true;     
 if(shape.tagName =='image'){rendering=false;}
 if(shape.tagName =='defs'){rendering=false;}
 if(shape.tagName =='svg'){rendering=false;}
 if(shape.tagName =='stop'){rendering=false;} 
 
 if(shape.tagName =='filter'){rendering=false;}
 if(shape.tagName =='feGaussianBlur'){rendering=false;}

 
 if(rendering==true)
  {
    shInfo.fillColor = shape.getAttribute('fill');
    if((shape.getAttribute('fill')=='' || shape.getAttribute('fill')==null) && shape.parentNode.getAttribute('id')!='svg'){
    
      shInfo.fillColor = shape.parentNode.getAttribute('fill');
          var mystyle= shape.parentNode.getAttribute('style'); 
      if(mystyle!= null && mystyle.indexOf('<![CDATA[')>=0)
       {
      
       }
        else
       {
        if(mystyle!= null){
          //var estilo=shape.getAttribute('style');
           var data;  
   
          var estilo=generateJSON(mystyle);
          eval("data="+estilo);
          //var data=eval('"'+estilo+'"'); 
          //var data=estilo.evalJSON(); 
    
          (data["font-size"])?shInfo.textSize=data["font-size"]:shInfo.textSize; 
          (data["font-family"])?shInfo.textFamily=data["font-family"]:shInfo.textFamily; 
      
          (data.fill)?shInfo.fillColor=data.fill:shInfo.fillColor; 
          (data.stroke)?shInfo.lineColor=data.stroke:shInfo.lineColor;
          (data.transform)?shInfo.transform=data.transform:shInfo.transform;
          //(data["fill-opacity"])?shInfo.fillOpac=data["fill-opacity"]:shInfo.fillOpac;
          (data["opacity"])?shInfo.fillOpac=data["opacity"]:shInfo.fillOpac;  
 
        }
       
       }
    }
    shInfo.filter = (shape.getAttribute('filter'))?shape.getAttribute('filter'):'';  
    shInfo.lineColor = (shape.getAttribute('stroke'))?shape.getAttribute('stroke') :'#000000'; 
    //shInfo.fillOpac = (shape.getAttribute('fill-opacity'))?parseFloat(shape.getAttribute('fill-opacity')):1;
    shInfo.fillOpac = (shape.getAttribute('opacity'))?parseFloat(shape.getAttribute('opacity')):1;
    shInfo.lineOpac = (shape.getAttribute('stroke-opacity'))?parseFloat(shape.getAttribute('stroke-opacity')):1;
    shInfo.lineWidth = (shape.getAttribute('stroke-width'))?parseFloat(shape.getAttribute('stroke-width')):1;
    
    var mystyle= shape.getAttribute('style'); 
    
    if(mystyle!= null && mystyle.indexOf('<![CDATA[')>=0)
     {
      
     }
      else
     {
      // shInfo.style=shape.getAttribute('style');
     
    if(mystyle!= null){
      //var estilo=shape.getAttribute('style');
      var data;  
   
      var estilo=generateJSON(mystyle);
      eval("data="+estilo);
      //var data=eval('"'+estilo+'"'); 
      //var data=estilo.evalJSON(); 
    
      (data["font-size"])?shInfo.textSize=data["font-size"]:shInfo.textSize; 
      (data["font-family"])?shInfo.textFamily=data["font-family"]:shInfo.textFamily; 
      
      (data.fill)?shInfo.fillColor=data.fill:shInfo.fillColor; 
      (data.stroke)?shInfo.lineColor=data.stroke:shInfo.lineColor;
      (data.transform)?shInfo.transform=data.transform:shInfo.transform;
      //(data["fill-opacity"])?shInfo.fillOpac=data["fill-opacity"]:shInfo.fillOpac;
      (data["opacity"])?shInfo.fillOpac=data["opacity"]:shInfo.fillOpac;  
      //(data.color)?shInfo.lineColor=data.color:shInfo.lineColor;
      
       //shInfo.fillColor=data.fill;
      //document.getElementById("someinfo").value +=data.fill+' ';//estilo ;//data['fill']+' ';//
    }
   }
  }  
 
 
 if (shape.tagName == 'rect') 
   {   
   if(shape.getAttribute('rx') || shape.getAttribute('ry')){
   shInfo.type = "rect";
   shInfo.rx = parseFloat(shape.getAttribute('rx'))
   shInfo.ry = parseFloat(shape.getAttribute('rx'))
   }
    shInfo.left = parseFloat(shape.getAttribute( 'x'));
    shInfo.top = parseFloat(shape.getAttribute( 'y'));
    shInfo.width = parseFloat(shape.getAttribute('width'));
    shInfo.height = parseFloat(shape.getAttribute('height'));  
   }
  else if (shape.tagName == 'ellipse' || shape.tagName == 'circle') 
   {     
    if(shape.tagName == 'circle'){
      shInfo.width = parseFloat(shape.getAttribute('r'))*2; 
      shInfo.height = parseFloat(shape.getAttribute('r'))*2; 
     }else{
      shInfo.width = parseFloat(shape.getAttribute('rx'))*2;
      shInfo.height = parseFloat(shape.getAttribute('ry'))*2;   
     }
    
    shInfo.left =    parseFloat(shape.getAttribute('cx')) - (shInfo.width/2);
    shInfo.top =  parseFloat(shape.getAttribute('cy')) - (shInfo.height/2)  ;
   }
   else if(shape.tagName == 'linearGradient') { 
    shInfo.text =shape.getAttribute('gradientUnits');//"userSpaceOnUse" 
    shInfo.left = shape.getAttribute('x1');
    shInfo.top = shape.getAttribute('y1');
    shInfo.width = shape.getAttribute('x2');
    shInfo.height = shape.getAttribute('y2');
    shInfo.href = shape.getAttribute('xlink:href');  
   } 
   else if(shape.tagName == 'radialGradient') {  
    shInfo.text =shape.getAttribute('gradientUnits');//"userSpaceOnUse" 
    shInfo.left = shape.getAttribute('cx');
    shInfo.top = shape.getAttribute('cy');
    shInfo.width = shape.getAttribute('fx');
    shInfo.height = shape.getAttribute('fy');  
    shInfo.lineWidth = shape.getAttribute('r');
    shInfo.href = shape.getAttribute('xlink:href');  
   }   
    else if(shape.tagName == 'stop') 
   {
    shInfo.fillColor = shape.getAttribute('stop-color');
    shInfo.fillOpac = shape.getAttribute('stop-opacity');
    shInfo.lineOpac = shape.getAttribute('offset');
    var mystyle= shape.getAttribute('style');
    if(mystyle!= null && mystyle.indexOf('<![CDATA[')>=0)
     {
      
     }
      else
     {
      if(mystyle!= null)
       {
        var data;  
        var estilo=generateJSON(mystyle);
        eval("data="+estilo);
        (data["stop-color"])?shInfo.fillColor=data["stop-color"]:shInfo.fillColor;
        (data["stop-opacity"])?shInfo.fillOpac=data["stop-opacity"]:shInfo.fillOpac;
        //document.getElementById("someinfo").value +=data["stop-color"]+' '; 
       } 
     }
   }
  else if (shape.tagName == 'line') 
   {
    shInfo.left = parseFloat(shape.getAttribute('x1'));
    shInfo.top = parseFloat(shape.getAttribute('y1'));
    shInfo.width = parseFloat(shape.getAttribute('x2')) -shInfo.left;
    shInfo.height = parseFloat(shape.getAttribute('y2')) -shInfo.top;
   } 
  else if (shape.tagName == 'polyline' || shape.tagName == 'polygon') 
   {
    shInfo.points = shape.getAttribute('points');
   } 
 
  else if (shape.tagName == 'g') 
   { 
    shInfo.type = "group";
    shInfo.left=(shape.getAttribute( 'x')!=null)?parseFloat(shape.getAttribute( 'x')):0;
    shInfo.top=(shape.getAttribute( 'y')!=null)?parseFloat(shape.getAttribute( 'y')):0;
    shInfo.width=(shape.getAttribute('width')!=null)?parseFloat(shape.getAttribute('width')):1;
    shInfo.height=(shape.getAttribute( 'height')!=null)?parseFloat(shape.getAttribute('height')):1;  
    shInfo.fillColor=(shape.getAttribute('fill')!=null)?shape.getAttribute('fill'):"#000000";
    if(shape.getAttribute('id')==null || shape.getAttribute('id')=='')
      {
       var nid='shape:' + createUUID(); 
       shape.setAttributeNS(null, 'id',  nid);
       shInfo.id=shape.getAttribute('id');
      } 
     
   }   
  else if (shape.tagName == 'path')
   {
    shInfo.points = shape.getAttribute('d');     
    //shInfo.transform = shape.getAttribute('transform'); 
 
    //alert(shInfo.transform);
    //document.forms[0].codebase.value=shape.getAttribute('d'); 
   
   } 
   else if (shape.tagName == 'pattern') 
   { 
    
    (shInfo.left)?parseFloat(shape.getAttribute( 'x')):0;
    (shInfo.top)?parseFloat(shape.getAttribute( 'y')):0;
    (shInfo.width)?parseFloat(shape.getAttribute('width')):800;
    (shInfo.height)?parseFloat(shape.getAttribute('height')):600;  
    (shInfo.viewBox)?shape.getAttribute('viewBox'):"0 0 800 600";
   
    if(shape.getAttribute('id')==null || shape.getAttribute('id')=='')
      {
       var nid='shape:' + createUUID(); 
       shape.setAttributeNS(null, 'id',  nid);
       shInfo.id=shape.getAttribute('id');
      } 

   }    
  else if (shape.tagName == 'image')
   {                                     
    
    shInfo.left = parseFloat(shape.getAttribute( 'x'));
    shInfo.top = parseFloat(shape.getAttribute( 'y'));
    shInfo.width = parseFloat(shape.getAttribute('width'));
    shInfo.height = parseFloat(shape.getAttribute('height'));   
    shInfo.fillOpac = parseFloat(shape.getAttribute('opacity'));   
    shInfo.href = shape.getAttribute('href');  
     
  }  
                                     
  else if (shape.tagName == 'use')
   {                                     
    
    shInfo.href = shape.getAttribute('xlink:href');  
     
  }             
  if(shape.parentNode.tagName != 'svg'){
    //shInfo.width = parseFloat(shape.getAttribute('width'));
    //shInfo.height = parseFloat(shape.getAttribute('height'));   
    //shInfo.viewBox = shape.getAttribute('viewBox');   
    shInfo.parent=shape.parentNode.getAttribute('id');
     

  }    
  var smilElements = 'set animate animateColor animateMotion animateTransform';

    x=shape.childNodes; 
    var att;
    for (i=0;i<x.length;i++){
         //nodeName;
        //nodeType ;  

      if (smilElements.indexOf(x[i].tagName+' ')!=-1) {  
           var att=x[i].getAttribute('attributeName')
          //<animate attributeName="fill" to="rgb(255,165,0)" dur="3s" fill="freeze"/>
          //<animateColor attributeName="fill" values='blue; green' dur='2s' repeatCount='indefinite' />
 
          var dur=parseFloat(x[i].getAttribute('dur'));
          var to=x[i].getAttribute('to');
          shInfo[x[i].tagName]= [{"attributeName": x[i].getAttribute('attributeName'), "from": 1, "to": to, "begin": 1, "dur": dur}];
           //alert(x[i].tagName)
                
      }   
    }     
             
    
    return shInfo;  
  }else{
   //do nothing if its the tracker
   }
  
   	
   	
};




/*
(   (  ( ( ( ( (( VML )) ) ) ) )  )   )
*/





VMLRenderer.prototype.info = function(shape)
{   
var shInfo = {};
shInfo.id = shape.id;
 shInfo.type = shape.tagName;   
 var rendering=true;     
 if(shape.tagName =='image'){rendering=false;}
 
 if(rendering==true)
  { 
 
     var fill = shape.getAttribute('fillcolor');
     var char=String(fill)
     var name=false;     
     if(char.indexOf('#')==-1) {
      name=true; 
       shInfo.fillColor=colorName[char];  
     }else{
       shInfo.fillColor=char;
     } 
     
    var stroke = shape.getAttribute('strokecolor');   
    
     var char=String(stroke); 
     //var char=stroke; 
        // alert(char);
      var name=false;     
     if(char.indexOf('#')==-1) {
      name=true; 
       shInfo.lineColor=colorName[char];  
      }else{
       shInfo.lineColor=char;
     }    
        shInfo.lineWidth = 34;//parseFloat(shape.getAttribute('strokeweight'))+2
        
    if(shape.getAttribute('stroked')==true){
        //alert(shape.getAttribute('strokeweight')); 
   }else{   
        // alert('NO '+shape.getAttribute('strokeweight'));
        //shInfo.lineWidth = 'none' ;
    }
  } 
  // shape.children['']
    //shInfo.fillOpac = parseFloat(shape.getAttribute('fillopacity'))
    //shInfo.lineOpac = parseFloat(shape.getAttribute('strokeopacity'))

 if (shape.style.rotation) { 
      var rotate=shape.style.rotation; 
      var rotateNum=rotate.split('Deg') ;
       
      shInfo.transform ='rotate('+rotateNum[0]+',0,0)'
  }else{
     shInfo.transform ='';
  }   
   
 
 if (shape.tagName == 'rect') 
   {
    shInfo.left = parseFloat(shape.style.left);
    shInfo.top = parseFloat(shape.style.top);
    shInfo.width = parseFloat(shape.style.width);
    shInfo.height = parseFloat(shape.style.height);  
    
    //++
    //shInfo.rotate = parseFloat(shape.style.rotation);  
   }
  else if (shape.tagName == 'oval') 
   { 
    shInfo.type = 'ellipse';
    shInfo.left = parseFloat(shape.style.left);
    shInfo.top = parseFloat(shape.style.tpp);
    shInfo.width = parseFloat(shape.style.width);
    shInfo.height = parseFloat(shape.style.height);  

    /*
    shInfo.width = parseFloat(shape.style.rx)*2;
    shInfo.height = parseFloat(shape.style.ry)*2;   
    shInfo.left = (shInfo.width * 2)  - parseFloat(shape.style.rx);
    shInfo.top = (shInfo.height * 2)  - parseFloat(shape.style.ry);
    */
   }
  else if (shape.tagName == 'roundrect') 
   {
    shInfo.left = parseFloat(shape.style.left);
    shInfo.top = parseFloat(shape.style.top);
    shInfo.width = parseFloat(shape.style.width);
    shInfo.height = parseFloat(shape.style.height);  
  
   }
  else if (shape.tagName == 'line') 
   {               
   var linefrom0=shape.getAttribute('from'); 
   document.forms[0].someinfo.value=linefrom0;
   var linefrom=document.forms[0].someinfo.value.split(',')
   
    shInfo.left =  linefrom[0];
    shInfo.top =  linefrom[1];
     // shInfo.width = parseFloat(shape.style.marginLeft);
    //shInfo.height = parseFloat(shape.style.marginTop);  
  
   } 
  else if (shape.tagName == 'polyline') 
   {
    shInfo.points = shape.style.points;
   }
   else if (shape.tagName == 'image') 
   {
    shInfo.left = parseFloat(shape.style.x);
    shInfo.top = parseFloat(shape.style.y);
    shInfo.width = parseFloat(shape.style.width);
    shInfo.height = parseFloat(shape.style.height);   
    shInfo.src = shape.style.src;  
   } 
  else 
  
   if (shape.tagName == 'shape')
   {   
    
       if(shape.children[0].tagName=='path') {
             shInfo.type = 'path';  
             //if ( shape.children[0].hasChildNodes )
	     //{   
	      // if(shape.children[0].hasAttribute("style")){
	         //var num='';//shape.children[0].id
                // alert(num+' zxc')              
              // } else {alert(' no') }
             //}
             //alert(shape.children[0].firstChild.tagName)
             var chain=String(shape.children[0].getAttribute('v'));
             //document.forms[0].someinfo.value=chain;
             
             
             shInfo.points= chain;//document.forms[0].someinfo.value; 
             
             //this.editor.log(shape.style.v); 
             
       }  
     if(shape.children[0].tagName=='textpath') { 
         shInfo.type = 'text';
             shInfo['font-family'] = shape.children[0].style.fontFamily
           shInfo['font-size'] = parseFloat(shape.children[0].style.fontSize)
        shInfo.top =parseFloat(shape.style.top)
        shInfo.left = parseFloat(shape.style.left)
        shInfo.text = shape.textContent
     }
      
   }
   return shInfo;  
   	
   	
};







//==========================================================
// features.js
//==========================================================

//var frameNum=parseInt(Math.random()*(frames.length-1)); 
//if(frameNum==0){frameNum=1;}  
/*
var frameNum=1;



function frame(name,data) 
 {
        this.name=name;
        this.data=data;
 }   


function loadDemo(){load( 
frames[frameNum].data

,c)
}              

function loadframe(num){load( 
frames[num].data

,c)
}
*/


//=========
// geometry functions
//=========
function ang2v(x1,y1,x2,y2)
{
  
        var resx=x2-x1;  
      var resy=y2-y1;   
       var ang=Math.atan2(resy,resx); 
       return ang;
}     

function dist2p(a,b,c,d) 
 {
   with (Math) 
    {
          return sqrt(abs((d-b)*(d-b)+ (c-a)*(c-a)));

    }
 }
function pmd2pb(a,b,c,d,q) {
	pmdx= (1-q)*a+c*q;
	pmdy= (1-q)*b+d*q;
var cad=pmdx+','+pmdy;
var sol= new Array();
sol= [cad,pmdx,pmdy];
return sol

} 

function getAngle(dx,dy) {
  var angle = Math.atan2(dy, dx);
  return angle;  
  
}


//==========================================================
//==========================================================
// screen
//==========================================================
//==========================================================


function RichDrawViewer(elem, renderer) {
 this.container = elem;
 this.renderer = renderer;
 this.renderer.init(this.container);
 this.renderer.editor = this;
} 


//==========================================================
//==========================================================
// file
//==========================================================
//==========================================================
 var numFile=1; 
 var maxnumFiles=0;
 var file=[]; 
 var ischarged=false;


function drawing() 
{    
  ie = navigator.appVersion.match(/MSIE (\d\.\d)/);
  opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
   for (var a = 1; a <= 100; a++)
   {  
    if(document.getElementById('draw'+a))
     {
       maxnumFiles++;
     }  
   }
  for (var a = 1; a <= maxnumFiles; a++)
   {  
     var container='draw'+a
     file[a]=document.getElementById(container).title; 
   }  
  chargeFile();
  looping();
  
 //=========
 //Charge
 //========
  /* var a=1;
  while(a <= number)
   {  
    var numFile = a ;
    //OPFnumber = a 
    //alert(OPFnumber)
    var container='draw'+numFile
    var file=document.getElementById(container).title; 
    var instance=instanceNumber[numFile];
    if ((!ie) || (opera)) 
     {
       renderer = new SVGRenderer();
     }
    else 
     {          
      renderer = new VMLRenderer();
      document.getElementById(container).style.overflow='hidden';
     }
     instance = new RichDrawViewer(document.getElementById(container), renderer)
     initialfile=file;   
     var ischarged=false;
     isCharged=chargeFile(file);
     
    //charge(file , numFile); 
     if(isCharged==true)
     {a++;}
     
     
   } 
   */
 //=========
 //Draw
 //========  
 }

function charge()
{
  var a=1;
  while(a<=maxnumFiles)
   {
    var numFile = a ;
    var container='draw'+numFile
    var instance=instanceNumber[numFile];
    var renderer;  
    canvasWidth =  document.getElementById(container).style.width.replace('px','');
    canvasHeight = document.getElementById(container).style.height.replace('px',''); 
    proporCanvas=canvasW/canvasH; 
   if ((!ie) || (opera)) 
    {
      renderer = new SVGRenderer();
    }
   else 
    {          
      renderer = new VMLRenderer();
      document.getElementById(container).style.overflow='hidden';
    }
   instance = new RichDrawViewer(document.getElementById(container), renderer)
    //fileCharged[OPFnumber]=false; 
    Draw(instance,numFile);  
    a++;
  // alert(instance.container.id + ' ' + OPFnumber) 

 } 
 
}
 ///////////////////////    
function looping(){
   if(ischarged==true)
    {
     clearTimeout(clockid); 
     charge();
     return; 
    }
     else
    {
     var clockid=setTimeout("looping()",100);
    }
 }  
 
function charge01(file, num)
{ 
  document.forms[0].source.value.length='';
  initialfile=file; 
  numFile=num  
  chargeFile();

  //chargeInterval[numFile] = setInterval(function() { if(document.getElementById("source").value.length>20){ chargeCode(code, numFile); stopCharge(numFile);return;}},10);
  //chargeInterval[numFile] = setInterval(function() { if(document.forms[0].source.value.length>20){ OPFstr[numFile] = document.getElementById("source").value; stopCharge(numFile);}},10);   
 /* var tmp=0;
  while(document.forms[0].source.value.length>20)
  {
   tmp++;
  }
  */
  if(document.forms[0].source.value.length>20)
   {
       //OPFstr[numFile] = document.getElementById("source").value; 
      
     alert('lleno'+document.forms[0].source.value.length)
   }
    else
   {  
      //chargeInterval[numFile] = setInterval(function() { if(document.forms[0].source.value.length>20){ OPFstr[numFile] = document.getElementById("source").value; stopCharge(numFile);}},10);   
    //setTimeout("chargeFile('"+file+"')",800);   
    //setTimeout("chargeFile('"+file+"')",800);   
    alert('vacio'+document.forms[0].source.value.length)
     //OPFstr[numFile] = document.getElementById("source").value; 
      
    
   }
   OPFstr[numFile] = document.getElementById("source").value;

  //OPF[numFile] = loadContent(code);
  
  //alert(code);  
  //setTimeout(function() {"clearInterval("+sec+")"},timerNext);
  //return;
}    

function stopCharge(numFile){
     clearInterval(chargeInterval[numFile]);
} 

function Draw(instance,numFile)
{       
  instance.renderer.removeAll(); 
  //var chain = OPFstr[numFile];//OPF[OPFnumber].toJSONString(); 
  

  //document.getElementById("source").value = OPFstr[numFile]; 
  //alert(OPFstr[numFile]) 
  if(OPFstr[numFile].length>20)
   {
    OPF[numFile] = loadContent(OPFstr[numFile]);  
    //fileCharged[numFile] = false;
    load(OPF[numFile],instance);   
   } 
    else
   {
     //alert(document.getElementById("source").value)
   }
  //chargeInterval[OPFnumber] = setInterval(function() { if(fileCharged[OPFnumber]==true){ stopCharge();return;}},10);
  return;
} 
    
function chargeCode(numFile){
  OPFstr[numFile] = document.getElementById("source").value; 
  //OPFstr[numFile] = code;
  //OPF[numFile] = loadContent(code);
  //alert(OPFstr[numFile]);
}

////////////////////

function loadContent(source)
{
   var myOPF;
   eval("myOPF="+source);   
   return myOPF;  
   
}

var xhr;
function chargeFile() 
{
	xhr=createXHR(); 
	xhr.open("GET", file[numFile], true);
	//xhr.open("GET", fname,true); 
	xhr.onreadystatechange=function() 
	{
		if (xhr.readyState == 4) 
		{
			if (xhr.status != 404) 
			{
				//myOPF=loadContent(xhr.responseText); 
				//document.getElementById("source").value= xhr.responseText;
				document.forms[0].source.value=xhr.responseText;
				chargeCode(numFile)
				//alert(numFile+' '+file[numFile]+' ');//+xhr.responseText)
				// OPF[numFile] = loadContent(OPFstr[numFile]);  
                                //fileCharged[numFile] = false;
                                //load(loadContent(xhr.responseText),instance);   
				//OPF[numFile]=loadContent(xhr.responseText);
				//chargeOPF(numFile)
				//alert(instance.container.id+' '+document.forms[0].source.value.length)
				//document.getElementById("source").innerHTML =xhr.responseText;
                                //fileCharged[numFile]=true;
                                if(numFile == maxnumFiles)
	                         {
	                          out();
	                         }
	                          else
	                          {
	                             numFile++;
	                             chargeFile(); 
	                            } 

 	               	} 
			else 
			{
				//document.getElementById("source").innerHTML = fname + " not found";
				
			}
		}
	}
	xhr.send(null);
}   
function out(){
 ischarged=true;
}
function createXHR() 
{
    var request = false;
        try {
            request = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch (err2) {
            try {
                request = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch (err3) {
		try {
			request = new XMLHttpRequest();
		}
		catch (err1) 
		{
			request = false; alert('no no')
		}
            }
        }
    return request;
}




//========= 
// json.js
//=========


if (!this.JSON) {

// Create a JSON object only if one does not already exist. We create the
// object in a closure to avoid global variables.

    JSON = function () {

        function f(n) {
            // Format integers to have at least two digits.
            return n < 10 ? '0' + n : n;
        }

        Date.prototype.toJSON = function (key) {

            return this.getUTCFullYear()   + '-' +
                 f(this.getUTCMonth() + 1) + '-' +
                 f(this.getUTCDate())      + 'T' +
                 f(this.getUTCHours())     + ':' +
                 f(this.getUTCMinutes())   + ':' +
                 f(this.getUTCSeconds())   + 'Z';
        };

        var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
            escapeable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
            gap,
            indent,
            meta = {    // table of character substitutions
                '\b': '\\b',
                '\t': '\\t',
                '\n': '\\n',
                '\f': '\\f',
                '\r': '\\r',
                '"' : '\\"',
                '\\': '\\\\'
            },
            rep;


        function quote(string) {

// If the string contains no control characters, no quote characters, and no
// backslash characters, then we can safely slap some quotes around it.
// Otherwise we must also replace the offending characters with safe escape
// sequences.

            escapeable.lastIndex = 0;
            return escapeable.test(string) ?
                '"' + string.replace(escapeable, function (a) {
                    var c = meta[a];
                    if (typeof c === 'string') {
                        return c;
                    }
                    return '\\u' + ('0000' +
                            (+(a.charCodeAt(0))).toString(16)).slice(-4);
                }) + '"' :
                '"' + string + '"';
        }


        function str(key, holder) {

// Produce a string from holder[key].

            var i,          // The loop counter.
                k,          // The member key.
                v,          // The member value.
                length,
                mind = gap,
                partial,
                value = holder[key];

// If the value has a toJSON method, call it to obtain a replacement value.

            if (value && typeof value === 'object' &&
                    typeof value.toJSON === 'function') {
                value = value.toJSON(key);
            }

// If we were called with a replacer function, then call the replacer to
// obtain a replacement value.

            if (typeof rep === 'function') {
                value = rep.call(holder, key, value);
            }

// What happens next depends on the value's type.

            switch (typeof value) {
            case 'string':
                return quote(value);

            case 'number':

// JSON numbers must be finite. Encode non-finite numbers as null.

                return isFinite(value) ? String(value) : 'null';

            case 'boolean':
            case 'null':

// If the value is a boolean or null, convert it to a string. Note:
// typeof null does not produce 'null'. The case is included here in
// the remote chance that this gets fixed someday.

                return String(value);

// If the type is 'object', we might be dealing with an object or an array or
// null.

            case 'object':

// Due to a specification blunder in ECMAScript, typeof null is 'object',
// so watch out for that case.

                if (!value) {
                    return 'null';
                }

// Make an array to hold the partial results of stringifying this object value.

                gap += indent;
                partial = [];

// If the object has a dontEnum length property, we'll treat it as an array.

                if (typeof value.length === 'number' &&
                        !(value.propertyIsEnumerable('length'))) {

// The object is an array. Stringify every element. Use null as a placeholder
// for non-JSON values.

                    length = value.length;
                    for (i = 0; i < length; i += 1) {
                        partial[i] = str(i, value) || 'null';
                    }

// Join all of the elements together, separated with commas, and wrap them in
// brackets.

                    v = partial.length === 0 ? '[]' :
                        gap ? '[\n' + gap +
                                partial.join(',\n' + gap) + '\n' +
                                    mind + ']' :
                              '[' + partial.join(',') + ']';
                    gap = mind;
                    return v;
                }

// If the replacer is an array, use it to select the members to be stringified.

                if (rep && typeof rep === 'object') {
                    length = rep.length;
                    for (i = 0; i < length; i += 1) {
                        k = rep[i];
                        if (typeof k === 'string') {
                            v = str(k, value, rep);
                            if (v) {
                                partial.push(quote(k) + (gap ? ': ' : ':') + v);
                            }
                        }
                    }
                } else {

// Otherwise, iterate through all of the keys in the object.

                    for (k in value) {
                        if (Object.hasOwnProperty.call(value, k)) {
                            v = str(k, value, rep);
                            if (v) {
                                partial.push(quote(k) + (gap ? ': ' : ':') + v);
                            }
                        }
                    }
                }

// Join all of the member texts together, separated with commas,
// and wrap them in braces.

                v = partial.length === 0 ? '{}' :
                    gap ? '{\n' + gap +
                            partial.join(',\n' + gap) + '\n' +
                            mind + '}' :
                          '{' + partial.join(',') + '}';
                gap = mind;
                return v;
            }
        }


// Return the JSON object containing the stringify and parse methods.

        return {
            stringify: function (value, replacer, space) {

// The stringify method takes a value and an optional replacer, and an optional
// space parameter, and returns a JSON text. The replacer can be a function
// that can replace values, or an array of strings that will select the keys.
// A default replacer method can be provided. Use of the space parameter can
// produce text that is more easily readable.

                var i;
                gap = '';
                indent = '';

// If the space parameter is a number, make an indent string containing that
// many spaces.

                if (typeof space === 'number') {
                    for (i = 0; i < space; i += 1) {
                        indent += ' ';
                    }

// If the space parameter is a string, it will be used as the indent string.

                } else if (typeof space === 'string') {
                    indent = space;
                }

// If there is a replacer, it must be a function or an array.
// Otherwise, throw an error.

                rep = replacer;
                if (replacer && typeof replacer !== 'function' &&
                        (typeof replacer !== 'object' ||
                         typeof replacer.length !== 'number')) {
                    throw new Error('JSON.stringify');
                }

// Make a fake root object containing our value under the key of ''.
// Return the result of stringifying the value.

                return str('', {'': value});
            },


            parse: function (text, reviver) {

// The parse method takes a text and an optional reviver function, and returns
// a JavaScript value if the text is a valid JSON text.

                var j;

                function walk(holder, key) {

// The walk method is used to recursively walk the resulting structure so
// that modifications can be made.

                    var k, v, value = holder[key];
                    if (value && typeof value === 'object') {
                        for (k in value) {
                            if (Object.hasOwnProperty.call(value, k)) {
                                v = walk(value, k);
                                if (v !== undefined) {
                                    value[k] = v;
                                } else {
                                    delete value[k];
                                }
                            }
                        }
                    }
                    return reviver.call(holder, key, value);
                }


// Parsing happens in four stages. In the first stage, we replace certain
// Unicode characters with escape sequences. JavaScript handles many characters
// incorrectly, either silently deleting them, or treating them as line endings.

                cx.lastIndex = 0;
                if (cx.test(text)) {
                    text = text.replace(cx, function (a) {
                        return '\\u' + ('0000' +
                                (+(a.charCodeAt(0))).toString(16)).slice(-4);
                    });
                }

// In the second stage, we run the text against regular expressions that look
// for non-JSON patterns. We are especially concerned with '()' and 'new'
// because they can cause invocation, and '=' because it can cause mutation.
// But just to be safe, we want to reject all unexpected forms.

// We split the second stage into 4 regexp operations in order to work around
// crippling inefficiencies in IE's and Safari's regexp engines. First we
// replace the JSON backslash pairs with '@' (a non-JSON character). Second, we
// replace all simple value tokens with ']' characters. Third, we delete all
// open brackets that follow a colon or comma or that begin the text. Finally,
// we look to see that the remaining characters are only whitespace or ']' or
// ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.

                if (/^[\],:{}\s]*$/.
test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@').
replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {

// In the third stage we use the eval function to compile the text into a
// JavaScript structure. The '{' operator is subject to a syntactic ambiguity
// in JavaScript: it can begin a block or an object literal. We wrap the text
// in parens to eliminate the ambiguity.

                    j = eval('(' + text + ')');

// In the optional fourth stage, we recursively walk the new structure, passing
// each name/value pair to a reviver function for possible transformation.

                    return typeof reviver === 'function' ?
                        walk({'': j}, '') : j;
                }

// If the text is not JSON parseable, then a SyntaxError is thrown.

                throw new SyntaxError('JSON.parse');
            }
        };
    }();
}


// Augment the basic prototypes if they have not already been augmented.
// These forms are obsolete. It is recommended that JSON.stringify and
// JSON.parse be used instead.

if (!Object.prototype.toJSONString) {
    Object.prototype.toJSONString = function (filter) {
        return JSON.stringify(this, filter);
    };
    Object.prototype.parseJSON = function (filter) {
        return JSON.parse(this, filter);
    };
}



         